siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Radio/Radio.types.ts

@@ -1,122 +1,122 @@
-import type { InputHTMLAttributes } from 'react';
-
-/**
- * Estados visuales del Radio Button
- *
- * @see Radio.tsx - Implementación del componente
- */
-export type RadioState = 'default' | 'hover' | 'focus' | 'disabled';
-
-/**
- * Props del componente Radio
- *
- * Extiende las props nativas de HTMLInputElement excepto 'type' y 'size'
- * que están manejados internamente por el componente.
- *
- * @see docs/colors.md - Sistema de colores para estados
- * @see docs/typography.md - Tipografía para labels y descriptions
- * @see docs/spacing.md - Espaciado entre elementos
- *
- * @example
- * ```tsx
- * // Radio simple
- * <Radio
- *   label="Accept terms"
- *   value="accept"
- *   name="terms"
- *   checked={accepted}
- *   onChange={(e) => setAccepted(e.target.checked)}
- * />
- *
- * // Radio con description
- * <Radio
- *   label="Allow tickets to be resold"
- *   description="Customers can resell or transfer their tickets"
- *   value="resell"
- *   name="ticketOptions"
- *   checked={resellAllowed}
- *   onChange={(e) => setResellAllowed(e.target.checked)}
- * />
- *
- * // Radio disabled
- * <Radio
- *   label="Premium feature"
- *   description="Upgrade to access this feature"
- *   disabled
- *   value="premium"
- *   name="features"
- * />
- * ```
- */
-export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  /**
-   * Etiqueta del radio button
-   *
-   * Se muestra con tipografía Label Small (14px Bold) según sistema de diseño.
-   *
-   * @see docs/typography.md - Label Small (text-sm font-bold)
-   */
-  label?: string;
-
-  /**
-   * Descripción debajo del label
-   *
-   * Se muestra con tipografía Paragraph Small (14px Regular) según sistema de diseño.
-   *
-   * @see docs/typography.md - Paragraph Small (text-sm font-normal)
-   */
-  description?: string;
-
-  /**
-   * Si el radio está seleccionado
-   *
-   * Controla el estado checked del radio button. En grupos de radio buttons,
-   * solo uno puede estar checked a la vez.
-   *
-   * @default false
-   */
-  checked?: boolean;
-
-  /**
-   * Valor del radio button (requerido para grupos)
-   *
-   * Identifica el valor único de este radio button dentro de un grupo.
-   * Es esencial para manejar la selección en grupos de radio buttons.
-   */
-  value?: string | number;
-
-  /**
-   * Nombre del grupo de radio buttons
-   *
-   * Agrupa múltiples radio buttons para permitir selección única.
-   * Todos los radios con el mismo `name` pertenecen al mismo grupo.
-   */
-  name?: string;
-
-  /**
-   * Clases CSS adicionales
-   *
-   * Permite extender los estilos del componente con clases de Tailwind CSS
-   * o clases personalizadas.
-   */
-  className?: string;
-
-  /**
-   * Callback cuando el estado del radio cambia
-   *
-   * Se ejecuta cuando el usuario selecciona o deselecciona el radio button.
-   *
-   * @param event - Evento de cambio del input nativo
-   *
-   * @example
-   * ```tsx
-   * <Radio
-   *   onChange={(e) => {
-   *     console.log('Checked:', e.target.checked);
-   *     console.log('Value:', e.target.value);
-   *   }}
-   * />
-   * ```
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
+import type { InputHTMLAttributes } from 'react';
+
+/**
+ * Estados visuales del Radio Button
+ *
+ * @see Radio.tsx - Implementación del componente
+ */
+export type RadioState = 'default' | 'hover' | 'focus' | 'disabled';
+
+/**
+ * Props del componente Radio
+ *
+ * Extiende las props nativas de HTMLInputElement excepto 'type' y 'size'
+ * que están manejados internamente por el componente.
+ *
+ * @see docs/colors.md - Sistema de colores para estados
+ * @see docs/typography.md - Tipografía para labels y descriptions
+ * @see docs/spacing.md - Espaciado entre elementos
+ *
+ * @example
+ * ```tsx
+ * // Radio simple
+ * <Radio
+ *   label="Accept terms"
+ *   value="accept"
+ *   name="terms"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ * />
+ *
+ * // Radio con description
+ * <Radio
+ *   label="Allow tickets to be resold"
+ *   description="Customers can resell or transfer their tickets"
+ *   value="resell"
+ *   name="ticketOptions"
+ *   checked={resellAllowed}
+ *   onChange={(e) => setResellAllowed(e.target.checked)}
+ * />
+ *
+ * // Radio disabled
+ * <Radio
+ *   label="Premium feature"
+ *   description="Upgrade to access this feature"
+ *   disabled
+ *   value="premium"
+ *   name="features"
+ * />
+ * ```
+ */
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  /**
+   * Etiqueta del radio button
+   *
+   * Se muestra con tipografía Label Small (14px Bold) según sistema de diseño.
+   *
+   * @see docs/typography.md - Label Small (text-sm font-bold)
+   */
+  label?: string;
+
+  /**
+   * Descripción debajo del label
+   *
+   * Se muestra con tipografía Paragraph Small (14px Regular) según sistema de diseño.
+   *
+   * @see docs/typography.md - Paragraph Small (text-sm font-normal)
+   */
+  description?: string;
+
+  /**
+   * Si el radio está seleccionado
+   *
+   * Controla el estado checked del radio button. En grupos de radio buttons,
+   * solo uno puede estar checked a la vez.
+   *
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Valor del radio button (requerido para grupos)
+   *
+   * Identifica el valor único de este radio button dentro de un grupo.
+   * Es esencial para manejar la selección en grupos de radio buttons.
+   */
+  value?: string | number;
+
+  /**
+   * Nombre del grupo de radio buttons
+   *
+   * Agrupa múltiples radio buttons para permitir selección única.
+   * Todos los radios con el mismo `name` pertenecen al mismo grupo.
+   */
+  name?: string;
+
+  /**
+   * Clases CSS adicionales
+   *
+   * Permite extender los estilos del componente con clases de Tailwind CSS
+   * o clases personalizadas.
+   */
+  className?: string;
+
+  /**
+   * Callback cuando el estado del radio cambia
+   *
+   * Se ejecuta cuando el usuario selecciona o deselecciona el radio button.
+   *
+   * @param event - Evento de cambio del input nativo
+   *
+   * @example
+   * ```tsx
+   * <Radio
+   *   onChange={(e) => {
+   *     console.log('Checked:', e.target.checked);
+   *     console.log('Value:', e.target.value);
+   *   }}
+   * />
+   * ```
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}