innoboxrr-react-form-elements 3.4.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-react-form-elements",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "Gemelo React de innoboxrr-form-elements: los mismos componentes, los mismos nombres y el mismo contrato, con diálogos, drawers, menús, avisos y paleta de comandos.",
   "type": "module",
   "main": "index.js",
@@ -53,7 +53,7 @@
     "@tinymce/tinymce-react": "^6.3.0",
     "@uiw/react-codemirror": "^4.25.11",
     "@yaireo/tagify": "^4.38.0",
-    "innoboxrr-form-core": "^2.5.0",
+    "innoboxrr-form-core": "^2.8.0",
     "innoboxrr-maskjs": "^2.0.0",
     "react-colorful": "^5.8.1",
     "react-phone-number-input": "^3.4.18",

package/src/CheckboxInputComponent.jsx

@@ -21,13 +21,14 @@ export default function CheckboxInputComponent({
 }) {
     const [current, set] = useControlled(value, onChange, '')
     const boxClass = useThemeClass('checkbox', customClass)
+    const labelClass = useThemeClass('label')
 
     const isGroup = Array.isArray(current)
     const checked = isGroup ? current.includes(val) : Boolean(current)
 
     return (
         <div className="fe-mb">
-            <label className="ml-2 text-sm font-medium text-gray-900 dark:text-white">
+            <label className={labelClass}>
                 <input
                     className={boxClass}
                     type="checkbox"

package/src/CodeInputComponent.jsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react'
 import useControlled from './internal/useControlled.js'
+import useTheme, { joinClasses } from './internal/useTheme.js'
 
 /**
  * Gemelo de CodeInputComponent.vue: las casillas de un código de un solo uso.
@@ -20,6 +21,7 @@ export default function CodeInputComponent({
     onChange,
     onComplete,
 }) {
+    const theme = useTheme()
     const [code, setCode] = useControlled(value, onChange, '')
     const inputs = useRef([])
     const [chars, setChars] = useState(() => Array.from({ length: fields }, (_, i) => (code ?? '')[i] ?? ''))
@@ -45,12 +47,12 @@ export default function CodeInputComponent({
         <div className={['code-input-container', className].filter(Boolean).join(' ')}>
             {title ? <p className="title">{title}</p> : null}
 
-            <div className="code-input fe-code-input">
+            <div className={joinClasses('code-input', theme.codeInput)}>
                 {chars.map((char, index) => (
                     <input
                         key={index}
                         ref={(element) => { inputs.current[index] = element }}
-                        className="w-14 h-14 rounded-lg border border-gray outline-none focus:outline-none focus:border-primary focus:ring-0 text-center transition-all"
+                        className={theme.codeCell}
                         type="text"
                         inputMode="numeric"
                         pattern="[0-9]*"

package/src/CountrySelectInputComponent.jsx

@@ -1,6 +1,7 @@
-import { useState } from 'react'
+import { useId, useState } from 'react'
 import PhoneInput, { isValidPhoneNumber, parsePhoneNumber } from 'react-phone-number-input'
-import Field from './internal/Field.jsx'
+import 'react-phone-number-input/style.css'
+import useTheme, { joinClasses } from './internal/useTheme.js'
 
 /**
  * Gemelo de CountrySelectInputComponent.vue.
@@ -15,29 +16,40 @@ import Field from './internal/Field.jsx'
  * emitía `change` en Vue, para que el formulario que ya lo consumía siga
  * funcionando igual.
  *
- * Los estilos van una vez por aplicación:
- *
- *     import 'react-phone-number-input/style.css'
+ * La hoja de la librería la importa el componente, igual que el de Vue. Antes
+ * la tenía que importar la aplicación y, si no lo hacía, el selector de país y
+ * el campo salían como controles nativos sin forma. El aspecto sale del tema
+ * (`phone`, `phoneInvalid`).
  */
 export default function CountrySelectInputComponent({
-    wrapperClass = 'fe-mb',
-    containerClass = 'fe-inline fe-w-full',
-    labelClass = 'ml-2 text-sm font-medium text-gray-900 dark:text-white',
+    // Sin valor, cada una sale de su token del tema.
+    wrapperClass = null,
+    containerClass = null,
+    labelClass = null,
     label = '',
     help = null,
     defaultPhone = '',
     defaultCountry = null,
     disabled = false,
     name = 'telephone',
+    id = null,
     placeholder = 'Ingresa un número telefónico',
     validators = null,
     onCountryChange,
     ...rest
 }) {
+    const theme = useTheme()
+
+    // Con el nombre como id, dos teléfonos en la misma página compartían id y
+    // la etiqueta del segundo enfocaba el primero.
+    const generatedId = useId()
+    const inputId = id ?? `${name}-${generatedId}`
+
     const [phone, setPhone] = useState(defaultPhone ? String(defaultPhone) : '')
     const [country, setCountry] = useState(defaultCountry ?? undefined)
 
     const valid = Boolean(phone) && isValidPhoneNumber(phone)
+    const invalid = ! valid && phone.length !== 0
 
     const announce = (nextPhone, nextCountry) => {
         const isValid = Boolean(nextPhone) && isValidPhoneNumber(nextPhone)
@@ -53,14 +65,15 @@ export default function CountrySelectInputComponent({
     }
 
     return (
-        <div className={wrapperClass}>
-            <div className={containerClass}>
-                {label ? <label className={labelClass} htmlFor={name}>{label}</label> : null}
+        <div className={wrapperClass ?? theme.field}>
+            {label ? <label className={labelClass ?? theme.label} htmlFor={inputId}>{label}</label> : null}
 
+            <div className={containerClass ?? theme.fieldInner}>
                 <PhoneInput
-                    id={name}
+                    id={inputId}
                     name={name}
-                    className={(! valid && phone.length !== 0) ? 'error' : undefined}
+                    className={joinClasses(theme.phone, invalid && theme.phoneInvalid)}
+                    aria-invalid={invalid || undefined}
                     international
                     countryCallingCodeEditable={false}
                     defaultCountry={defaultCountry ?? undefined}
@@ -79,9 +92,9 @@ export default function CountrySelectInputComponent({
                         announce(clean, country)
                     }}
                     {...rest} />
-
-                {help ? <p className="text-sm text-gray-500">{help}</p> : null}
             </div>
+
+            {help ? <p className="fe-text-muted fe-text-sm">{help}</p> : null}
         </div>
     )
 }

package/src/DynamicGroupInputComponent.jsx

@@ -21,6 +21,7 @@ import SelectInputComponent from './SelectInputComponent.jsx'
 import TextInputComponent from './TextInputComponent.jsx'
 import TextareaInputComponent from './TextareaInputComponent.jsx'
 import useControlled from './internal/useControlled.js'
+import useTheme, { joinClasses } from './internal/useTheme.js'
 
 const COMPONENTS = {
     text: TextInputComponent,
@@ -38,15 +39,20 @@ const COMPONENTS = {
  * por su cuenta y trae ordenación **por teclado**, que ni SortableJS ni la API
  * nativa de arrastre dan. Aquí no es un detalle: un formulario que solo se
  * puede reordenar con el ratón no es accesible.
+ *
+ * El aspecto sale del tema, con el mismo marcado que la rama Vue: cada grupo es
+ * una superficie con su barra. Antes eran clases de Tailwind y colores escritos
+ * para el modo oscuro que el paquete no declara.
  */
 function SortableGroup({ id, children }) {
+    const theme = useTheme()
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id })
 
     return (
         <div
             ref={setNodeRef}
             style={{ transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 }}
-            className="border rounded-lg bg-white dark:bg-slate-800 shadow-sm relative dark:border-slate-600">
+            className={theme.surface}>
             {children({ attributes, listeners })}
         </div>
     )
@@ -61,6 +67,7 @@ export default function DynamicGroupInputComponent({
     removeButtonLabel = 'Eliminar',
     itemLabel = 'Item',
 }) {
+    const theme = useTheme()
     const [current, set] = useControlled(value, onChange, [])
     const nextKey = useRef(0)
 
@@ -113,67 +120,66 @@ export default function DynamicGroupInputComponent({
     return (
         <div>
             {label ? (
-                <label className="block mb-4 ml-2 text-sm font-medium text-slate-900 dark:text-slate-100">
+                <label className={theme.label}>
                     {label}
                 </label>
             ) : null}
 
             <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
                 <SortableContext items={keyed.map((group) => group.__key)} strategy={verticalListSortingStrategy}>
-                    <div className="space-y-2 rounded-lg">
+                    <div className={theme.group}>
                         {keyed.map((group, index) => (
                             <SortableGroup key={group.__key} id={group.__key}>
                                 {({ attributes, listeners }) => (
                                     <>
-                                        <div className="flex justify-between items-center px-4 py-3 border-b bg-slate-50 dark:bg-slate-700 dark:border-slate-600 rounded-t-lg">
-                                            <div className="flex items-center gap-2">
-                                                <button
-                                                    type="button"
-                                                    aria-label={`Mover ${itemLabel} ${index + 1}`}
-                                                    className="cursor-move drag-handle text-slate-400"
-                                                    {...attributes}
-                                                    {...listeners}>
-                                                    <IconComponent name="drag" />
-                                                </button>
-                                                <h4 className="text-md font-semibold text-slate-800 dark:text-slate-100">
-                                                    {itemLabel} #{index + 1}
-                                                </h4>
-                                            </div>
-
-                                            <div className="flex items-center space-x-4 text-slate-400">
-                                                <button
-                                                    type="button"
-                                                    aria-label={`Duplicar ${itemLabel} ${index + 1}`}
-                                                    className="hover:text-blue-500 transition mr-2"
-                                                    onClick={() => set([
-                                                        ...keyed.slice(0, index + 1),
-                                                        { ...group, __key: `grupo-${nextKey.current++}` },
-                                                        ...keyed.slice(index + 1),
-                                                    ])}>
-                                                    <IconComponent name="copy" />
-                                                </button>
-
-                                                <button
-                                                    type="button"
-                                                    aria-label={`${removeButtonLabel} ${index + 1}`}
-                                                    className="text-red-800 dark:text-red-400 text-sm"
-                                                    onClick={() => set(keyed.filter((_, position) => position !== index))}>
-                                                    <IconComponent name="delete" />
-                                                </button>
-
-                                                <button
-                                                    type="button"
-                                                    aria-label={`Expandir ${itemLabel} ${index + 1}`}
-                                                    aria-expanded={! group._collapsed}
-                                                    className="hover:text-slate-600 dark:hover:text-slate-300 transition"
-                                                    onClick={() => updateAt(index, '_collapsed', ! group._collapsed)}>
-                                                    <IconComponent name={group._collapsed ? 'up' : 'down'} />
-                                                </button>
-                                            </div>
+                                        <div className={theme.toolbar}>
+                                            <button
+                                                type="button"
+                                                aria-label={`Mover ${itemLabel} ${index + 1}`}
+                                                className={joinClasses(theme.iconButton, theme.dragHandle, 'drag-handle')}
+                                                {...attributes}
+                                                {...listeners}>
+                                                <IconComponent name="drag" />
+                                            </button>
+
+                                            <h4 className={theme.groupTitle}>
+                                                {itemLabel} #{index + 1}
+                                            </h4>
+
+                                            <span className={theme.toolbarSpacer} />
+
+                                            <button
+                                                type="button"
+                                                aria-label={`Duplicar ${itemLabel} ${index + 1}`}
+                                                className={theme.iconButton}
+                                                onClick={() => set([
+                                                    ...keyed.slice(0, index + 1),
+                                                    { ...group, __key: `grupo-${nextKey.current++}` },
+                                                    ...keyed.slice(index + 1),
+                                                ])}>
+                                                <IconComponent name="copy" />
+                                            </button>
+
+                                            <button
+                                                type="button"
+                                                aria-label={`${removeButtonLabel} ${index + 1}`}
+                                                className={joinClasses(theme.iconButton, theme.iconButtonDanger)}
+                                                onClick={() => set(keyed.filter((_, position) => position !== index))}>
+                                                <IconComponent name="delete" />
+                                            </button>
+
+                                            <button
+                                                type="button"
+                                                aria-label={`Expandir ${itemLabel} ${index + 1}`}
+                                                aria-expanded={! group._collapsed}
+                                                className={theme.iconButton}
+                                                onClick={() => updateAt(index, '_collapsed', ! group._collapsed)}>
+                                                <IconComponent name={group._collapsed ? 'up' : 'down'} />
+                                            </button>
                                         </div>
 
                                         {! group._collapsed ? (
-                                            <div className="p-4">
+                                            <div className="fe-card-body">
                                                 {inputsConfig.map((field) => {
                                                     const Component = COMPONENTS[field.type] ?? TextInputComponent
 
@@ -208,7 +214,7 @@ export default function DynamicGroupInputComponent({
 
             <button
                 type="button"
-                className="fe-button fe-mt"
+                className={joinClasses(theme.button, 'fe-mt')}
                 onClick={() => set([...keyed, emptyGroup()])}>
                 {addButtonLabel}
             </button>

package/src/FileDropInputComponent.jsx

@@ -1,8 +1,14 @@
 import { useRef, useState } from 'react'
+import IconComponent from './IconComponent.jsx'
+import useTheme from './internal/useTheme.js'
 
 /**
  * Gemelo de FileDropInputComponent.vue. `onFilesChange` recibe un array de
  * File, venga de arrastrar o del diálogo.
+ *
+ * `fe-file-drop` no lo definía ninguna hoja, así que la zona salía sin borde ni
+ * resalte. Ahora sale del tema, con el mismo icono y el mismo texto secundario
+ * que la rama Vue.
  */
 export default function FileDropInputComponent({
     multiple = false,
@@ -11,18 +17,20 @@ export default function FileDropInputComponent({
     subText = 'o haz clic para seleccionar los archivos.',
     onFilesChange,
 }) {
+    const theme = useTheme()
     const input = useRef(null)
     const [dragging, setDragging] = useState(false)
 
     return (
         <div
-            className="fe-file-drop"
+            className={theme.fileDrop}
             data-dragging={dragging}
             role="button"
             tabIndex={0}
             onClick={() => input.current?.click()}
             onKeyDown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault()
                     input.current?.click()
                 }
             }}
@@ -36,8 +44,10 @@ export default function FileDropInputComponent({
                 setDragging(false)
                 onFilesChange?.(Array.from(event.dataTransfer.files))
             }}>
+            <IconComponent name="media" size={32} />
+
             <p>{mainText}</p>
-            <p>{subText}</p>
+            <p className={theme.fileDropHint}>{subText}</p>
 
             <input
                 ref={input}

package/src/FileInputComponent.jsx

@@ -167,14 +167,14 @@ export default function FileInputComponent({
             </ul>
 
             {errors.length ? (
-                <ul className="fe-list text-red-600">
+                <ul className="fe-list fe-error">
                     {errors.map((entry, index) => (
                         <li key={`${entry.name}-error-${index}`}>{entry.name}: {entry.errors?.join(', ')}</li>
                     ))}
                 </ul>
             ) : null}
 
-            {overTotal ? <p className="text-red-600">El tamaño total supera el máximo permitido.</p> : null}
+            {overTotal ? <p className="fe-error">El tamaño total supera el máximo permitido.</p> : null}
 
             {! autoUpload && files.length ? (
                 <button type="button" className="fe-button" disabled={uploading || overTotal} onClick={upload}>

package/src/FqsInputComponent.jsx

@@ -34,7 +34,7 @@ export default function FqsInputComponent({
 
     return (
         <div>
-            <h4>{text.title}</h4>
+            <h4 className="fe-group-title fe-mb-sm">{text.title}</h4>
 
             {items.map((item, index) => (
                 <div key={index} className="fe-card fe-card-sm fe-card-body fe-mb">

package/src/RadioInputComponent.jsx

@@ -17,10 +17,11 @@ export default function RadioInputComponent({
 }) {
     const [current, set] = useControlled(value, onChange, '')
     const radioClass = useThemeClass('radio', customClass)
+    const labelClass = useThemeClass('label')
 
     return (
         <div className="fe-mb">
-            <label className="ml-2 text-sm font-medium text-gray-900 dark:text-white">
+            <label className={labelClass}>
                 <input
                     className={radioClass}
                     type="radio"

package/src/SingleCheckboxInputComponent.jsx

@@ -1,3 +1,5 @@
+import useThemeClass from './internal/useThemeClass.js'
+
 /**
  * Gemelo de SingleCheckboxInputComponent.vue.
  *
@@ -13,10 +15,11 @@ export default function SingleCheckboxInputComponent({
     ...rest
 }) {
     const htmlId = `${id}_${label}`
+    const labelClass = useThemeClass('label')
 
     return (
         <div className="fe-mb">
-            <label htmlFor={htmlId} className="ml-2 text-sm font-medium text-gray-900 dark:text-white">
+            <label htmlFor={htmlId} className={labelClass}>
                 <input
                     id={htmlId}
                     className="fe-checkbox"