@zauru-sdk/components 6.2.28 → 6.3.1

package/src/Containers/Container.tsx

@@ -1,15 +1,25 @@
 import React from "react";
 
 type Props = {
-  title?: string;
+  title?: React.ReactNode;
   description?: string;
   children: React.ReactNode;
   className?: string;
   rightContent?: React.ReactNode;
+  collapsible?: boolean;
+  defaultOpen?: boolean;
 };
 
 export const Container = (props: Props) => {
-  const { title, description, children, className = "", rightContent } = props;
+  const {
+    title,
+    description,
+    children,
+    className = "",
+    rightContent,
+    collapsible = false,
+    defaultOpen = true,
+  } = props;
 
   const titleInfo = (
     <>
@@ -22,18 +32,38 @@ export const Container = (props: Props) => {
     </>
   );
 
-  return (
-    <>
+  const header = rightContent ? (
+    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
+      <div className="max-w-3xl">{titleInfo}</div>
+      <div className="flex-shrink-0">{rightContent}</div>
+    </div>
+  ) : (
+    titleInfo
+  );
+
+  const body = <div className="mt-5 space-y-5">{children}</div>;
+
+  if (collapsible) {
+    return (
       <div className={`mx-2 ${className}`}>
-        {rightContent && (
-          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
-            <div className="max-w-3xl">{titleInfo}</div>
-            <div className="flex-shrink-0">{rightContent}</div>
-          </div>
-        )}
-        {!rightContent && titleInfo}
-        <div className="mt-5 space-y-5">{children}</div>
+        <details className="group" {...(defaultOpen ? { open: true } : {})}>
+          <summary className="flex cursor-pointer list-none items-start gap-3 rounded-md py-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 [&::-webkit-details-marker]:hidden">
+            <span
+              aria-hidden="true"
+              className="mt-2 inline-block h-0 w-0 shrink-0 border-y-[5px] border-l-[7px] border-y-transparent border-l-gray-700 transition-transform group-open:rotate-90"
+            />
+            <div className="min-w-0 flex-1">{header}</div>
+          </summary>
+          {body}
+        </details>
       </div>
-    </>
+    );
+  }
+
+  return (
+    <div className={`mx-2 ${className}`}>
+      {header}
+      {body}
+    </div>
   );
 };

package/src/Containers/OutletContainer.tsx

@@ -7,7 +7,7 @@ type Props = {
 export const OutletContainer = (props: Props) => {
   const { children } = props;
   return (
-    <div className="flex-1 overflow-x-auto" suppressHydrationWarning>
+    <div className="min-w-0 flex-1 overflow-x-auto" suppressHydrationWarning>
       {children}
     </div>
   );

package/src/DynamicTable/GenericDynamicTable.tsx

@@ -59,6 +59,8 @@ type Props = {
    * es decir, sin permitir ningún tipo de interacción de edición o eliminación.
    */
   readOnly?: boolean;
+  /** Contenido extra debajo de cada fila (p. ej. un resumen). */
+  rowSummary?: (rowData: RowDataType) => React.ReactNode;
 };
 
 const GenericDynamicTableErrorComponent = ({ name }: { name: string }) => {
@@ -178,6 +180,7 @@ export const GenericDynamicTable = (props: Props) => {
     maxRows,
     confirmDelete = true,
     addRowButtonHandler,
+    rowSummary,
   } = props;
 
   /**
@@ -300,16 +303,30 @@ export const GenericDynamicTable = (props: Props) => {
       );
 
       if (orientation === "horizontal") {
+        const rowClassName =
+          index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "";
+        const summaryColSpan =
+          rendereableColumns.length + (isEditable ? 1 : 0);
+        const summaryContent = rowSummary?.(rowData);
+
         return (
-          <tr
-            key={rowData.id}
-            className={
-              index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : ""
-            }
-          >
-            {rendereableColumns.map((column) => renderCell(rowData, column))}
-            {isEditable && renderDeleteButton(rowData)}
-          </tr>
+          <React.Fragment key={rowData.id}>
+            <tr className={rowClassName}>
+              {rendereableColumns.map((column) => renderCell(rowData, column))}
+              {isEditable && renderDeleteButton(rowData)}
+            </tr>
+            {summaryContent ? (
+              <tr className={rowClassName}>
+                <td
+                  colSpan={summaryColSpan}
+                  className="px-2 pb-3 pt-0 text-sm text-gray-700 border-b border-gray-300"
+                >
+                  <span className="font-medium text-gray-500">Resumen: </span>
+                  {summaryContent}
+                </td>
+              </tr>
+            ) : null}
+          </React.Fragment>
         );
       } else {
         // Orientación vertical

package/src/Footer/Footer.tsx

@@ -40,7 +40,8 @@ export const Footer = ({
     <footer className={`inset-x-0 bottom-0 px-2 py-[20px] ${color}`}>
       <div className="px-4 mx-auto flex flex-wrap items-center justify-center">
         <p className="text-white text-[1.2rem]">
-          {`Creado en `} <a href={href}>Zauru</a> {`con ❤️ v.${version}`}
+          {`Creado en `} <a href={href}>Zauru</a>{" "}
+          {`con ❤️ ${new Date().getFullYear()} v.${version}`}
         </p>
         {showConnection && (
           <div className="ml-5">

package/src/Form/FileUpload/index.tsx

@@ -22,6 +22,7 @@ type Props = {
   zauruBaseURL?: string;
   setProcessing?: (processing: boolean) => void;
   signature?: boolean;
+  capture?: "user" | "environment";
 };
 
 export const FileUploadField = (props: Props) => {
@@ -43,6 +44,7 @@ export const FileUploadField = (props: Props) => {
     zauruBaseURL = "https://zauru.herokuapp.com",
     setProcessing,
     signature = false,
+    capture,
   } = props;
 
   const {
@@ -572,6 +574,7 @@ export const FileUploadField = (props: Props) => {
           type="file"
           id={id ?? name}
           accept={fileTypes.map((ft) => `.${ft}`).join(", ")}
+          capture={capture}
           className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
           {...(register ?? {})}
           ref={fileInputRef}

package/src/Form/FormLayout/index.tsx

@@ -0,0 +1,35 @@
+import { Form, type FormMethod } from "@remix-run/react";
+import { type ReactNode } from "react";
+import { ButtonSectionContainer } from "../../Containers/index.js";
+
+type Props = {
+  formId: string;
+  title?: string;
+  children: ReactNode;
+  buttons?: ReactNode;
+  method?: FormMethod;
+};
+
+export const FormLayout = (props: Props) => {
+  const { title, children, buttons, method, formId } = props;
+
+  return (
+    <Form id={formId} name={formId} method={method ?? "post"} key={formId}>
+      {title && (
+        <label className="block text-sm font-medium text-gray-700 mb-3">
+          {title}
+        </label>
+      )}
+      <div className="shadow sm:overflow-hidden sm:rounded-md">
+        <div className="space-y-6 bg-white px-4 py-5 sm:p-6">
+          {children}
+        </div>
+        {buttons && (
+          <ButtonSectionContainer whitBg>
+            {buttons}
+          </ButtonSectionContainer>
+        )}
+      </div>
+    </Form>
+  );
+};

package/src/Form/RadioButtonGroup/index.tsx

@@ -0,0 +1,4 @@
+export {
+  RadioButton as RadioButtonGroup,
+  RadioButton as RadioButtonGroupWithoutValidation,
+} from "../RadioButton/index.js";

package/src/Form/SelectField/index.tsx

@@ -17,7 +17,9 @@ type Props = {
   defaultValue?: SelectFieldOption;
   defaultValueMulti?: SelectFieldOption[];
   helpText?: string;
-  options: Array<SelectFieldOption>;
+  options: Array<
+    SelectFieldOption & { disabled?: boolean; disabledLabel?: string }
+  >;
   onChange?: (value: SelectFieldOption | null) => void;
   onChangeMulti?: (value: SelectFieldOption[]) => void;
   onInputChange?: (newValue: string) => void;
@@ -236,7 +238,10 @@ export const SelectField = (props: Props) => {
   );
 
   const handleOptionClick = useCallback(
-    (option: SelectFieldOption) => {
+    (option: SelectFieldOption & { disabled?: boolean }) => {
+      if (option.disabled) {
+        return;
+      }
       if (isMulti) {
         handleAddMultiValue(option);
       } else {
@@ -441,27 +446,43 @@ export const SelectField = (props: Props) => {
             ref={optionsRef}
             className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
           >
-            {filteredOptions.map((option, index) => (
-              <li
-                key={`${option.value}-${index}`}
-                className={`cursor-pointer select-none relative py-2 pl-3 pr-9 ${
-                  (
-                    isMulti
-                      ? valueMulti.some((v) => v.value === option.value)
-                      : value?.value === option.value
-                  )
-                    ? "text-white bg-indigo-600"
-                    : index === highlightedIndex
-                    ? "text-black bg-sky-200"
-                    : "text-gray-900"
-                }`}
-                onClick={() => handleOptionClick(option)}
-                onMouseEnter={() => setHighlightedIndex(index)}
-                onMouseLeave={() => setHighlightedIndex(-1)}
-              >
-                {option.label}
-              </li>
-            ))}
+            {filteredOptions.map((option, index) => {
+              const isDisabled = Boolean(
+                (option as SelectFieldOption & { disabled?: boolean }).disabled
+              );
+              const disabledLabel = (
+                option as SelectFieldOption & { disabledLabel?: string }
+              ).disabledLabel;
+              const isSelected = isMulti
+                ? valueMulti.some((v) => v.value === option.value)
+                : value?.value === option.value;
+              return (
+                <li
+                  key={`${option.value}-${index}`}
+                  className={`select-none relative py-2 pl-3 pr-9 ${
+                    isDisabled
+                      ? "cursor-not-allowed text-gray-400 bg-gray-50"
+                      : isSelected
+                        ? "cursor-pointer text-white bg-indigo-600"
+                        : index === highlightedIndex
+                          ? "cursor-pointer text-black bg-sky-200"
+                          : "cursor-pointer text-gray-900"
+                  }`}
+                  onClick={() => !isDisabled && handleOptionClick(option)}
+                  onMouseEnter={() =>
+                    !isDisabled && setHighlightedIndex(index)
+                  }
+                  onMouseLeave={() => setHighlightedIndex(-1)}
+                >
+                  {option.label}
+                  {isDisabled && disabledLabel && (
+                    <span className="ml-2 text-xs text-gray-400">
+                      ({disabledLabel})
+                    </span>
+                  )}
+                </li>
+              );
+            })}
           </ul>
         )}
       </div>

package/src/Form/TextField/index.tsx

@@ -1,5 +1,5 @@
 import { IdeaIconSVG } from "@zauru-sdk/icons";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 type Props = {
@@ -52,6 +52,7 @@ export const TextField = (props: Props) => {
 
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
   const [value, setValue] = useState(defaultValue);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const {
     register: tempRegister,
     formState: { errors },
@@ -65,6 +66,13 @@ export const TextField = (props: Props) => {
       })
     : undefined; // Solo usar register si está disponible
 
+  const assignRef = (element: HTMLInputElement | null) => {
+    inputRef.current = element;
+    if (typeof register?.ref === "function") {
+      register.ref(element);
+    }
+  };
+
   const color = error ? "red" : "gray";
 
   const isReadOnly = disabled || readOnly;
@@ -73,6 +81,9 @@ export const TextField = (props: Props) => {
   const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
 
   useEffect(() => {
+    if (inputRef.current && document.activeElement === inputRef.current) {
+      return;
+    }
     if (setOnFormValue) {
       setOnFormValue(name ?? "-1", defaultValue);
     }
@@ -119,6 +130,7 @@ export const TextField = (props: Props) => {
         value={value}
         hidden
         {...(register ?? {})}
+        ref={assignRef}
         name={name}
         onChange={handleInputChange}
       />
@@ -144,6 +156,7 @@ export const TextField = (props: Props) => {
       style={style}
       className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
       {...(register ?? {})}
+      ref={assignRef}
       name={name}
       autoComplete={autoComplete}
       onChange={handleInputChange}

package/src/Form/index.ts

@@ -5,6 +5,7 @@ export * from "./DynamicBaculoForm/index.js";
 export * from "./FieldContainer/index.js";
 export * from "./FileUpload/index.js";
 export * from "./FormButtons/index.js";
+export * from "./FormLayout/index.js";
 export * from "./SelectField/index.js";
 export * from "./TextArea/index.js";
 export * from "./TextField/index.js";
@@ -12,3 +13,4 @@ export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
 export * from "./ReactZodForm/index.js";
 export * from "./RadioButton/index.js";
+export * from "./RadioButtonGroup/index.js";

package/src/Labels/SearchFiltersSummary.tsx

@@ -0,0 +1,34 @@
+export type SearchFilterItem = {
+  key: string;
+  label: string;
+  value: string;
+};
+
+type Props = {
+  items?: SearchFilterItem[];
+  emptyText?: string;
+  className?: string;
+};
+
+export const SearchFiltersSummary = ({
+  items,
+  emptyText = "Sin filtros registrados",
+  className = "",
+}: Props) => {
+  if (!items?.length) {
+    return (
+      <p className={`text-xs text-gray-400 ${className}`}>{emptyText}</p>
+    );
+  }
+
+  return (
+    <dl className={`flex flex-col gap-1 text-xs text-gray-700 ${className}`}>
+      {items.map((item) => (
+        <div key={item.key} className="flex flex-wrap items-baseline gap-x-1">
+          <dt className="font-semibold text-gray-500">{item.label}:</dt>
+          <dd className="text-gray-800">{item.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+};

package/src/Labels/index.tsx

@@ -1 +1,2 @@
 export * from "./InfoLabel/index.js";
+export * from "./SearchFiltersSummary.js";

package/src/Layouts/errorLayout/index.tsx

@@ -6,21 +6,30 @@ import {
   useRouteError,
   Link,
 } from "@remix-run/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export const ErrorLayout = ({
   from,
   isRootLevel = true,
   error: parentError,
+  onError,
 }: {
   from?: string;
   isRootLevel?: boolean;
   error?: Error;
+  onError?: (error: Error, meta: { from?: string }) => void;
 }) => {
   try {
     const error = useRouteError();
     const [showDetails, setShowDetails] = useState(!!parentError);
 
+    useEffect(() => {
+      const reportable = error instanceof Error ? error : parentError;
+      if (reportable instanceof Error) {
+        onError?.(reportable, { from });
+      }
+    }, [error, parentError, from, onError]);
+
     const baseError = (
       <div className="min-h-screen flex flex-col items-center justify-center p-4">
         <img src="/logo.png" alt="Zauru Logo" className="mb-8 h-20" />
@@ -49,7 +58,7 @@ export const ErrorLayout = ({
             <div className="mb-4 text-center">
               <button
                 onClick={() => setShowDetails(!showDetails)}
-                className="text-blue-400 hover:text-blue-300 transition duration-300"
+                className="text-blue-400 hover:text-blue-300 transition duration-300 cursor-pointer"
               >
                 {showDetails ? "Ocultar detalles" : "Ver más detalles"}
               </button>

package/src/Modal/ItemModal.tsx

@@ -93,8 +93,10 @@ const ItemSelectionModal: React.FC<ItemModalProps> = ({
   const filteredList = itemList
     .map((category) => ({
       ...category,
-      items: category.items.filter((item) =>
-        item.name.toLowerCase().includes(searchTerm.toLowerCase())
+      items: category.items.filter(
+        (item) =>
+          item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          item.code.toLowerCase().includes(searchTerm.toLowerCase())
       ),
     }))
     .filter(
@@ -163,10 +165,15 @@ const ItemSelectionModal: React.FC<ItemModalProps> = ({
         {/* Header */}
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-2xl font-bold">
-            {selectedItem ? "Confirmar selección" : "Seleccionar un Ítem"}
+            {selectedItem
+              ? "Confirmar selección"
+              : `Seleccionar un Ítem - (${itemList.reduce(
+                  (acc, category) => acc + category.items.length,
+                  0
+                )} ítems disponibles)`}
           </h2>
           <button
-            className="text-gray-500 hover:text-gray-800 text-3xl"
+            className="text-gray-500 hover:text-gray-800 text-3xl cursor-pointer"
             onClick={handleCloseModal}
           >
             &times;
@@ -187,7 +194,7 @@ const ItemSelectionModal: React.FC<ItemModalProps> = ({
             <div className="relative mb-4">
               <input
                 type="text"
-                placeholder="Buscar por nombre o categoría..."
+                placeholder="Buscar por nombre, código o categoría..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 className="p-2 border rounded-lg w-full"
@@ -323,6 +330,12 @@ const ItemSelectionModal: React.FC<ItemModalProps> = ({
               className="w-40 h-40 object-cover rounded mb-4 shadow-md"
             />
             <p className="mb-2 text-xl font-bold">{selectedItem.name}</p>
+            <p className="mb-2 text-base font-semibold text-gray-700">
+              Código:
+              <span className="ml-1 font-normal text-gray-800">
+                {selectedItem.code}
+              </span>
+            </p>
             <p className="mb-2 text-base font-semibold text-gray-700">
               Stock disponible:
               <span className="ml-1 font-normal text-gray-800">

package/src/NavBar/NavBar.tsx

@@ -24,7 +24,7 @@ const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
         <div className="relative inline-block">
           <button
             onClick={() => setShowOptionsMenu(!showOptionsMenu)}
-            className={`relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`}
+            className={`relative flex cursor-pointer items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`}
           >
             {name ?? <OpcionButtonSvgIcon />}
             <DropDownArrowSvgIcon />
@@ -128,12 +128,18 @@ export const NavBar = ({
   selectedColor,
   version,
   reloadCatalogsOption,
+  showDarkModeToggle = false,
 }: NavBarProps) => {
   const color: ColorInterface = COLORS[selectedColor];
   const [NavBarOpen, setNavBarOpen] = useState(false);
   const [currentVersion, setCurrentVersion] = useState(version);
+  const [isDarkMode, setIsDarkMode] = useState(false);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", isDarkMode);
+  }, [isDarkMode]);
+
   useEffect(() => {
     if (version !== currentVersion) {
       setCurrentVersion(version);
@@ -213,6 +219,18 @@ export const NavBar = ({
                     </div>
                   </Link>
                 ),
+                showDarkModeToggle && (
+                  <button
+                    key="dark-mode-toggle"
+                    type="button"
+                    className="block w-full cursor-pointer text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
+                    onClick={() => setIsDarkMode((value) => !value)}
+                  >
+                    <div className="mx-auto pt-2">
+                      <span>{isDarkMode ? "Modo claro" : "Modo oscuro"}</span>
+                    </div>
+                  </button>
+                ),
                 <Link
                   key="cerrar-sesion"
                   className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`}
@@ -229,7 +247,7 @@ export const NavBar = ({
         </ul>
       </>
     );
-  }, [items, loggedIn, hiddenItemsChange]);
+  }, [items, loggedIn, hiddenItemsChange, showDarkModeToggle, isDarkMode]);
 
   return (
     <nav className={`py-3 ${color.bg600}`}>

package/src/NavBar/NavBar.types.ts

@@ -32,6 +32,7 @@ export type NavBarProps = {
   LinkComponent?: any;
   version?: string;
   reloadCatalogsOption?: boolean;
+  showDarkModeToggle?: boolean;
 };
 
 export type NavBarStateProps = {