@dipusevilla/componentes-iu 1.0.29 → 1.0.32

package/dist/types/components/Checkbox.d.ts

@@ -1,9 +1,11 @@
 import type { Control } from 'react-hook-form';
 export interface CheckboxProps {
-    control: Control<any>;
-    name: string;
+    /** --- Modo RHF (controlado) --- */
+    control?: Control<any> | null;
+    name?: string;
     rules?: any;
     defaultValue?: boolean;
+    /** --- Props comunes --- */
     label?: string;
     labelHidden?: boolean;
     disabled?: boolean;
@@ -11,8 +13,13 @@ export interface CheckboxProps {
     className?: string;
     hasError?: boolean;
     errorMessage?: string;
+    /** --- Modo no-RHF (headless) --- */
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
 }
 /**
- * Checkbox controlado con React Hook Form
+ * Checkbox que soporta 2 modos:
+ *  - Controlado por React Hook Form (si se pasa `control`)
+ *  - Headless (sin RHF) usando `checked`/`onChange`
  */
-export declare function Checkbox({ control, name, rules, defaultValue, label, labelHidden, disabled, size, className, hasError, errorMessage, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ control, name, rules, defaultValue, label, labelHidden, disabled, size, className, hasError, errorMessage, checked, onChange, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ChoiceGroup.d.ts

@@ -0,0 +1,32 @@
+type Size = "sm" | "md" | "lg";
+export type ChoiceOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export interface ChoiceGroupProps {
+    /** Opciones a elegir (selección única) */
+    options: ChoiceOption[];
+    /** Valor controlado */
+    value?: string;
+    /** Valor inicial en modo no controlado */
+    defaultValue?: string;
+    /** Callback al cambiar */
+    onChange?: (value: string) => void;
+    /** Nº de columnas en la malla */
+    columns?: 2 | 3 | 4;
+    /** Tamaño visual */
+    size?: Size;
+    /** Deshabilitar todo el grupo */
+    disabled?: boolean;
+    /** Accesibilidad */
+    ariaLabel?: string;
+    /** Si prefieres etiquetar con id externo (p.e. un <label>) */
+    ariaLabelledBy?: string;
+    /** Orientación lógica para accesibilidad */
+    orientation?: "horizontal" | "vertical";
+    /** Estilos extra */
+    className?: string;
+}
+export declare function ChoiceGroup({ options, value, defaultValue, onChange, columns, size, disabled, ariaLabel, ariaLabelledBy, orientation, className, }: ChoiceGroupProps): import("react/jsx-runtime").JSX.Element;
+export default ChoiceGroup;

package/dist/types/components/CollapsibleList.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type CollapsibleItem = {
+    id: string;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    content: React.ReactNode;
+    actions?: React.ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+};
+export type CollapsibleListProps = {
+    items: CollapsibleItem[];
+    singleOpen?: boolean;
+    openIds?: string[];
+    onChangeOpenIds?: (ids: string[]) => void;
+    dense?: boolean;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+};
+export declare function CollapsibleList({ items, singleOpen, openIds, onChangeOpenIds, dense, className, headerClassName, contentClassName, }: CollapsibleListProps): import("react/jsx-runtime").JSX.Element;
+export default CollapsibleList;

package/dist/types/components/CollapsibleSection.d.ts

@@ -1,8 +1,15 @@
 import type { ReactNode } from 'react';
+export type CollapsibleSectionType = 'default' | 'plain' | 'soft' | 'ghost';
 export interface CollapsibleSectionProps {
     title: string;
     children: ReactNode;
     defaultOpen?: boolean;
     className?: string;
+    /** Variante visual del contenedor (default = actual) */
+    type?: CollapsibleSectionType;
+    /** Clases extra para el contenedor del contenido (dentro del área colapsable) */
+    contentClassName?: string;
+    /** Clases extra para el header (el botón) */
+    headerClassName?: string;
 }
-export declare function CollapsibleSection({ title, children, defaultOpen, className, }: CollapsibleSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapsibleSection({ title, children, defaultOpen, className, type, contentClassName, headerClassName, }: CollapsibleSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/CompactAccordion.d.ts

@@ -0,0 +1,19 @@
+export type CompactAccordionItem = {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+    defaultOpen?: boolean;
+    leftAdornment?: React.ReactNode;
+    actions?: React.ReactNode;
+    disabled?: boolean;
+};
+export type CompactAccordionProps = {
+    items: CompactAccordionItem[];
+    value?: string[];
+    onValueChange?: (openIds: string[]) => void;
+    multiple?: boolean;
+    dense?: boolean;
+    className?: string;
+};
+export declare function CompactAccordion({ items, value, onValueChange, multiple, dense, className, }: CompactAccordionProps): import("react/jsx-runtime").JSX.Element;
+export default CompactAccordion;

package/dist/types/components/FormRenderer.d.ts

@@ -1,5 +1,7 @@
+import { type Resolver } from "react-hook-form";
 import type { FieldSchema, FormSchema } from "../types/FormTypes";
-export declare function FormRenderer({ schema }: {
+export declare function FormRenderer({ schema, resolver: externalResolver, }: {
     schema: FormSchema;
+    resolver?: Resolver<any>;
 }): import("react/jsx-runtime").JSX.Element;
 export { FieldSchema };

package/dist/types/components/Input.d.ts

@@ -15,12 +15,24 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     separator?: React.ReactNode;
     suffixButton?: React.ReactNode;
     disabled?: boolean;
+    /** Si se proporciona `control`, el input es controlado por RHF */
     control?: Control<any>;
     name?: FieldPath<FieldValues>;
     rules?: RegisterOptions<FieldValues, FieldPath<FieldValues>>;
     defaultValue?: unknown;
-}
-export declare function Input({ id, type, size, width, label, labelHidden, hasError, errorMessage, prefixIcon, suffixIcon, separator, suffixButton, disabled, control, name, rules, defaultValue, loading, className: inputClassName, ...props }: InputProps & {
+    /**
+     * Si reservar un espacio fijo debajo para el mensaje de error.
+     * Por defecto: true si es controlado (con `control`), false si es no controlado.
+     */
+    reserveErrorSpace?: boolean;
+    /**
+     * Alias (deprecado) para desactivar la reserva de espacio de error.
+     * Si lo usas: effectiveReserveErrorSpace = !disableErrorPlaceholder
+     */
+    disableErrorPlaceholder?: boolean;
+    /** Estado de carga con skeleton */
     loading?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Input({ id, type, size, width, label, labelHidden, hasError, errorMessage, prefixIcon, suffixIcon, separator, suffixButton, disabled, control, name, rules, defaultValue, reserveErrorSpace, disableErrorPlaceholder, // <- alias deprecado
+loading, className: inputClassName, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/PageLayout.d.ts

@@ -2,12 +2,13 @@ import React from 'react';
 import { type SidebarProps } from './Sidebar';
 import { type HeaderProps } from './Header';
 export interface PageLayoutProps {
-    /** Props para el Sidebar */
+    hideSidebar?: boolean;
+    /** Props para el Sidebar (se ignoran si hideSidebar = true) */
     sidebar: Pick<SidebarProps, 'appName' | 'orgName' | 'username' | 'footerText' | 'navItems' | 'selectedNav' | 'onSelectNav' | 'width'>;
     /** Props para el Header */
     header: Pick<HeaderProps, 'pinnedPages' | 'onRemovePinned' | 'onBack' | 'dark' | 'locale' | 'languageOptions' | 'onChangeLocale' | 'profile' | 'profileOptions' | 'onChangeProfile'>;
     /** Contenido principal (renderizado por tu router o componentes hijos) */
     children: React.ReactNode;
 }
-export declare function PageLayout({ sidebar, header, children }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLayout({ hideSidebar, sidebar, header, children }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
 export default PageLayout;

package/dist/types/components/Select.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { type Control } from 'react-hook-form';
+import React from "react";
+import { type Control } from "react-hook-form";
 import { Option } from "../types/FormTypes";
-type Size = 'sm' | 'md' | 'lg';
+type Size = "sm" | "md" | "lg";
 export interface SelectProps {
     control?: Control<any>;
     name?: string;
@@ -11,9 +11,8 @@ export interface SelectProps {
     options?: Option[];
     /** Función asíncrona para cargar opciones */
     loadOptions?: () => Promise<Option[]>;
-    /** Lista de campos que al cambiar volverán a disparar el loadOptions */
+    /** Lista de deps que re-disparan loadOptions */
     reloadDeps?: any[];
-    /** Para uso “no-RHF” */
     value?: string | number;
     onChange?: (value: any) => void;
     size?: Size;
@@ -22,10 +21,16 @@ export interface SelectProps {
     labelHidden?: boolean;
     hasError?: boolean;
     errorMessage?: string;
+    /** Reservar espacio para errores (default: true si RHF, false si unctrl) */
+    reserveErrorSpace?: boolean;
     disableErrorPlaceholder?: boolean;
     disabled?: boolean;
     className?: string;
     suffixButton?: React.ReactNode;
+    /** Skeleton state */
+    loading?: boolean;
+    /** Evita que el Select fuerce la primera opción si el value es vacío o no está en lista. */
+    coerceFirstValid?: boolean;
 }
 export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/TextArea.d.ts

@@ -1,4 +1,4 @@
-import { type TextareaHTMLAttributes } from 'react';
+import React, { type TextareaHTMLAttributes } from 'react';
 import type { Control } from 'react-hook-form';
 type Size = 'sm' | 'md' | 'lg';
 export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'name' | 'defaultValue'> {
@@ -15,6 +15,7 @@ export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     maxLength?: number;
     showCounter?: boolean;
     className?: string;
+    suffixButton?: React.ReactNode;
 }
-export declare function TextArea({ control, name, rules, defaultValue, size, width, label, labelHidden, hasError, errorMessage, maxLength, showCounter, className, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextArea({ control, name, rules, defaultValue, size, width, label, labelHidden, hasError, errorMessage, maxLength, showCounter, className, suffixButton, ...textareaProps }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/hooks/useAsyncSelectOptions.d.ts

@@ -1,6 +1,9 @@
-import type { FieldSchema } from "../components/FormRenderer";
-import { Option } from "../types/FormTypes";
+import type { FieldSchema } from "../types/FormTypes";
+export type Option = {
+    label: string;
+    value: string | number;
+};
 export declare function useAsyncSelectOptions(fields: FieldSchema[]): {
-    loadingCount: number;
     optionsMap: Record<string, Option[]>;
+    loadingCount: number;
 };

package/dist/types/hooks/useDisabledMap.d.ts

@@ -1,10 +1,5 @@
 import { type Control, type FieldValues } from "react-hook-form";
-import type { FieldSchema } from "../components/FormRenderer";
+import type { FieldEntry } from "../types/FormTypes";
 type DisabledMap = Record<string, boolean>;
-/**
- * Para cada FieldSchema que tenga `disabledWhen`, comprueba con useWatch
- * el valor actual del campo `watchField`, y si coincide con `watchValue`,
- * marca ese campo como deshabilitado (true). Devuelve un map { [fieldName]: boolean }.
- */
-export declare function useDisabledMap(fields: FieldSchema[], control: Control<FieldValues>): DisabledMap;
+export declare function useDisabledMap(fields?: FieldEntry[], control?: Control<FieldValues>): DisabledMap;
 export {};

package/dist/types/hooks/useDynamicYupSchema.d.ts

@@ -1,16 +1,10 @@
 import type { ObjectSchema } from "yup";
-import type { FieldSchema } from "../components/FormRenderer";
+import type { FieldEntry } from "../types/FormTypes";
 interface UseDynamicParams {
-    fields: FieldSchema[];
+    fields?: FieldEntry[];
     explicitSchema?: ObjectSchema<any>;
 }
-/**
- * Si explicitSchema está definido, lo usa directamente.
- * Si no, construye dinámicamente un esquema Yup a partir de `fields`.
- */
-export declare function useDynamicYupSchema({ fields, explicitSchema, }: UseDynamicParams): import("react-hook-form").Resolver<any, unknown, any> | import("react-hook-form").Resolver<{
-    [x: string]: any;
-}, unknown, {
-    [x: string]: any;
-}>;
+export declare function useDynamicYupSchema({ fields, explicitSchema }: UseDynamicParams): import("react-hook-form").Resolver<any, unknown, any> | import("react-hook-form").Resolver<{
+    [x: string]: never;
+}, unknown, {}>;
 export {};

package/dist/types/hooks/useFieldsMap.d.ts

@@ -1,2 +1,2 @@
-import type { FieldSchema } from "../components/FormRenderer";
-export declare function useFieldsMap(fields: FieldSchema[]): Record<string, FieldSchema>;
+import type { FieldSchema, FieldEntry } from "../types/FormTypes";
+export declare function useFieldsMap(fields?: FieldEntry[]): Record<string, FieldSchema>;

package/dist/types/index.d.ts

@@ -60,4 +60,6 @@ export { Checkbox } from './components/Checkbox';
 export type { CheckboxProps } from './components/Checkbox';
 export { SearchField } from './components/SearchField';
 export type { SearchFieldProps } from './components/SearchField';
+export { CompactAccordion } from "./components/CompactAccordion";
+export type { CompactAccordionItem, CompactAccordionProps } from "./components/CompactAccordion";
 import './styles/index.css';

package/dist/types/rules/RuleDSL.d.ts

@@ -0,0 +1,34 @@
+export type RuleExpr = {
+    op: "eq";
+    field: string;
+    value: unknown;
+} | {
+    op: "neq";
+    field: string;
+    value: unknown;
+} | {
+    op: "in";
+    field: string;
+    values: unknown[];
+} | {
+    op: "notIn";
+    field: string;
+    values: unknown[];
+} | {
+    op: "gt" | "gte" | "lt" | "lte";
+    field: string;
+    value: number | string | Date;
+} | {
+    op: "and";
+    rules: RuleExpr[];
+} | {
+    op: "or";
+    rules: RuleExpr[];
+};
+export type VisibilityRule = {
+    rule: RuleExpr;
+};
+export type ClearWhenRule = {
+    rule: RuleExpr;
+    clearTo?: unknown;
+};

package/dist/types/rules/evalRules.d.ts

@@ -0,0 +1,2 @@
+import type { RuleExpr } from "./RuleDSL";
+export declare function evalRule(rule: RuleExpr, values: Record<string, unknown>): boolean;

package/dist/types/types/FormTypes.d.ts

@@ -3,6 +3,7 @@ import { Size } from "../components/InputGroup";
 import { InputProps } from "../components/Input";
 import { SelectProps } from "../components/Select";
 import { UseFormGetValues, UseFormWatch } from "react-hook-form";
+import type { VisibilityRule, ClearWhenRule } from "../rules/RuleDSL";
 export type Condition = {
     watchField: string;
     watchValue: unknown | ((vals: Record<string, unknown>) => boolean);
@@ -15,6 +16,7 @@ type FormCtx = {
     getValues: UseFormGetValues<any>;
     watch: UseFormWatch<any>;
 };
+export type FieldEntry = FieldSchema | ButtonField | InputGroupField;
 /**
  * Esquema que describe un campo atómico del formulario.
  */
@@ -75,23 +77,14 @@ export interface FieldSchema {
     /** Etiqueta accesible. */
     ariaLabel?: string;
     /** Condición de habilitación basada en otro campo. */
-    disabledWhen?: {
-        watchField: string;
-        watchValue: unknown | ((allValues: Record<string, unknown>) => boolean);
-    };
-    clearWhen?: Condition & {
-        /** valor al que limpiar; por defecto '' */
-        clearTo?: unknown;
-    };
+    disabledWhen?: ConditionalProp;
+    clearWhen?: ClearProp;
     /** Deshabilitar manualmente. */
     disabled?: boolean;
     /** Para date: mostrar hora. */
     showTime?: boolean;
     /** Condición de visibilidad basada en otro campo. */
-    visibleWhen?: {
-        watchField: string;
-        watchValue: unknown | ((allValues: Record<string, unknown>) => boolean);
-    };
+    visibleWhen?: ConditionalProp;
     /** Atributo para saber si hay carga en curso */
     loading?: boolean;
     inputs?: Array<InputProps & SelectProps & {
@@ -143,7 +136,7 @@ export interface SectionColumn {
     /** Ancho CSS/Tailwind. */
     width?: string;
     /** Campos en esta columna. */
-    fields?: Array<string | FieldSchema | ButtonField | InputGroupField>;
+    fields?: Array<string | FieldEntry>;
     /** Sub-columnas anidadas. */
     cols?: SectionColumn[];
     /** Sub-filas anidadas. */
@@ -198,7 +191,7 @@ export interface FormSchema {
     /** Layout principal: array de LayoutNode. */
     layout: LayoutNode[];
     /** Definición global de todos los campos. */
-    fields: FieldSchema[];
+    fields: FieldEntry[];
     /** Función a llamar al hacer submit. */
     onSubmit: (data: unknown) => void | Promise<void>;
     /** Mensaje de éxito a mostrar. */
@@ -216,4 +209,11 @@ export type Option = {
     label?: string;
     value: string | number;
 };
+export type ConditionalProp = VisibilityRule | {
+    watchField: string;
+    watchValue: unknown | ((vals: Record<string, unknown>) => boolean);
+};
+export type ClearProp = ClearWhenRule | (Condition & {
+    clearTo?: unknown;
+});
 export {};

package/dist/types/utils/buildYupSchema.d.ts

@@ -0,0 +1,3 @@
+import * as yup from "yup";
+import { FormSchema } from "../types/FormTypes";
+export declare function buildYupSchema(form: FormSchema): yup.ObjectSchema<Record<string, unknown>>;

package/dist/types/utils/generateYupCode.d.ts

@@ -0,0 +1,2 @@
+import type { FormSchema } from "../types/FormTypes";
+export declare function generateYupCode(schema: FormSchema, exportName?: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dipusevilla/componentes-iu",
-  "version": "1.0.29",
+  "version": "1.0.32",
   "description": "Librería de componentes React de Dipusevilla",
   "keywords": [
     "react",
@@ -35,10 +35,13 @@
     "@hookform/resolvers": "^5.0.1",
     "clsx": "^2.1.1",
     "i18next": "^25.2.1",
+    "immer": "^10.1.3",
     "react-hook-form": "^7.56.4",
     "react-i18next": "^15.5.2",
+    "react-router-dom": "^7.9.4",
     "tailwind-merge": "^3.3.1",
-    "yup": "^1.6.1"
+    "yup": "^1.6.1",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",