From a6a83fe65a7232f2eaba8fa8667d24a7127dd0dd Mon Sep 17 00:00:00 2001
From: jorgemike <alvaradojr2001@gmail.com>
Date: Sat, 22 Mar 2025 18:12:54 -0500
Subject: [PATCH] fix build

---
 src/app/(components)/button/page.tsx     | 151 +++++++++++++++++------
 src/components/checkbox-option-group.tsx |   6 +-
 src/components/radio-option-group.tsx    |   4 +-
 3 files changed, 118 insertions(+), 43 deletions(-)

diff --git a/src/app/(components)/button/page.tsx b/src/app/(components)/button/page.tsx
index f7d1e20..fc8642e 100644
--- a/src/app/(components)/button/page.tsx
+++ b/src/app/(components)/button/page.tsx
@@ -5,7 +5,6 @@ import VistaComponente from "@/components/vista-componente";
 import Button from "@/components/button";
 
 export default function Page() {
-
   return (
     <>
       <IndiceContenido
@@ -37,7 +36,9 @@ export default function Page() {
   Clic aquí
 </Button>`}
         >
-          <Button onClick={() => alert("¡Hola mundo!")} className="mb-3">Clic aquí</Button>
+          <Button onClick={() => alert("¡Hola mundo!")} className="mb-3">
+            Clic aquí
+          </Button>
         </VistaComponente>
 
         <VistaComponente
@@ -53,42 +54,116 @@ export default function Page() {
           </Button>
         </VistaComponente>
 
-        <section id="button-props" className="mb-5">
-          <h2 className="h5">⚙️ Props del componente</h2>
-          <ul>
-            <li>
-              <code>variant?: string</code> – Clase base del botón. Ej:{" "}
-              <code>"primary"</code>, <code>"danger"</code>.
-            </li>
-            <li>
-              <code>outline?: boolean</code> – Si el botón debe usar estilo{" "}
-              <code>outline</code>.
-            </li>
-            <li>
-              <code>icon?: string | ReactNode</code> – Ícono Bootstrap (por
-              nombre) o componente React.
-            </li>
-            <li>
-              <code>size?: "sm" | "lg"</code> – Tamaño del botón.
-            </li>
-            <li>
-              <code>className?: string</code> – Clases adicionales para el
-              botón.
-            </li>
-            <li>
-              <code>type?: "button" | "submit" | "reset"</code> – Tipo de botón.
-            </li>
-            <li>
-              <code>disabled?: boolean</code> – Desactiva el botón.
-            </li>
-            <li>
-              <code>children: ReactNode</code> – Contenido del botón.
-            </li>
-            <li>
-              <code>...rest</code> – Cualquier otra prop válida de{" "}
-              <code>&lt;button&gt;</code>.
-            </li>
-          </ul>
+        {/* PROPS */}
+        <section className="mb-5" id="button-props">
+          <h2 className="h5 mb-3">⚙️ Props del componente</h2>
+          <table className="table table-bordered table-striped align-middle">
+            <thead>
+              <tr>
+                <th scope="col">Prop</th>
+                <th scope="col">Tipo</th>
+                <th scope="col">Descripción</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <code>variant?</code>
+                </td>
+                <td>
+                  <code>string</code>
+                </td>
+                <td>
+                  Clase base del botón. Ej: <code>&quot;primary&quot;</code>,{" "}
+                  <code>&quot;danger&quot;</code>, etc.
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>outline?</code>
+                </td>
+                <td>
+                  <code>boolean</code>
+                </td>
+                <td>
+                  Si el botón debe usar el estilo <code>outline</code>.
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>icon?</code>
+                </td>
+                <td>
+                  <code>string | ReactNode</code>
+                </td>
+                <td>
+                  Ícono Bootstrap por nombre o un componente React
+                  personalizado.
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>size?</code>
+                </td>
+                <td>
+                  <code>&quot;sm&quot; | &quot;lg&quot;</code>
+                </td>
+                <td>Tamaño del botón, usando clases de Bootstrap.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>className?</code>
+                </td>
+                <td>
+                  <code>string</code>
+                </td>
+                <td>Clases adicionales para el botón.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>type?</code>
+                </td>
+                <td>
+                  <code>
+                    &quot;button&quot; | &quot;submit&quot; | &quot;reset&quot;
+                  </code>
+                </td>
+                <td>Tipo del botón HTML.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>disabled?</code>
+                </td>
+                <td>
+                  <code>boolean</code>
+                </td>
+                <td>
+                  Desactiva el botón cuando es <code>true</code>.
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>children</code>
+                </td>
+                <td>
+                  <code>ReactNode</code>
+                </td>
+                <td>Contenido del botón (texto o nodos).</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>...rest</code>
+                </td>
+                <td>
+                  <code>ButtonHTMLAttributes&lt;HTMLButtonElement&gt;</code>
+                </td>
+                <td>
+                  Soporta todas las props válidas de <code>&lt;button&gt;</code>{" "}
+                  nativo.
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </section>
       </div>
     </>
diff --git a/src/components/checkbox-option-group.tsx b/src/components/checkbox-option-group.tsx
index 66720ac..cb09ca5 100644
--- a/src/components/checkbox-option-group.tsx
+++ b/src/components/checkbox-option-group.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 
-export interface CheckboxOption<T = any> {
+export interface CheckboxOption<T = unknown> {
   label: string;
   value: T;
   disabled?: boolean;
 }
 
-interface CheckboxOptionGroupProps<T = any> {
+interface CheckboxOptionGroupProps<T = unknown> {
   name: string;
   options: CheckboxOption<T>[];
   selectedValues: T[];
@@ -16,7 +16,7 @@ interface CheckboxOptionGroupProps<T = any> {
   className?: string;
 }
 
-export default function CheckboxOptionGroup<T>({
+export default function CheckboxOptionGroup<T = unknown>({
   name,
   options,
   selectedValues,
diff --git a/src/components/radio-option-group.tsx b/src/components/radio-option-group.tsx
index 1501b27..cc2bc2c 100644
--- a/src/components/radio-option-group.tsx
+++ b/src/components/radio-option-group.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 
-export interface RadioOption<T = any> {
+export interface RadioOption<T = unknown> {
   label: string;
   value: T;
   disabled?: boolean;
 }
 
-interface RadioOptionGroupProps<T = any> {
+interface RadioOptionGroupProps<T = unknown> {
   name: string;
   options: RadioOption<T>[];
   selectedValue?: T;