siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Checkbox/Checkbox.tsx

@@ -1,208 +1,208 @@
-import { forwardRef, useEffect, useRef } from 'react';
-import type { CheckboxProps } from './Checkbox.types';
-
-/**
- * Checkbox del sistema de diseño Siesa
- *
- * Componente de checkbox con soporte completo para estados interactivos,
- * indeterminate, y dark mode pixel-perfect según especificaciones de Figma.
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Sombra button-inset para estado checked
- * - Type safety con TypeScript estricto
- * - Accesibilidad con input nativo y ARIA
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico (Label/Paragraph)
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * <Checkbox
- *   label="Show on Events Page"
- *   description="Make this event visible on your profile"
- *   checked={true}
- *   onChange={(e) => console.log(e.target.checked)}
- * />
- * ```
- */
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  (
-    {
-      label,
-      description,
-      checked = false,
-      indeterminate = false,
-      disabled = false,
-      className = '',
-      id,
-      onChange,
-      ...props
-    },
-    ref
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const combinedRef = (ref as any) || inputRef;
-
-    // Generar ID único si no se proporciona
-    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
-
-    // Manejar el estado indeterminate
-    useEffect(() => {
-      if (combinedRef.current) {
-        combinedRef.current.indeterminate = indeterminate;
-      }
-    }, [indeterminate, combinedRef]);
-
-    // ===== CLASES BASE DEL CHECKBOX =====
-    const baseCheckboxClasses = `
-      w-4
-      h-4
-      rounded
-      border
-      border-border-primary
-      bg-bg-primary
-      transition-all
-      duration-150
-      flex
-      items-center
-      justify-center
-      dark:bg-dark-bg-primary
-      dark:border-dark-border-primary
-    `;
-
-    // ===== CLASES PARA ESTADOS INTERACTIVOS =====
-    const interactiveClasses = !disabled
-      ? (checked || indeterminate)
-        ? `
-          peer-hover:border-[#50a5f7]
-          peer-focus:ring-2
-          peer-focus:ring-primary-custom-400/20
-          peer-focus:border-primary-custom-600
-          dark:peer-hover:border-[#50a5f7]
-          dark:peer-focus:border-dark-border-custom
-          dark:peer-focus:ring-dark-border-custom/20
-        `
-        : `
-          peer-hover:border-[#b6b6b9]
-          peer-focus:ring-2
-          peer-focus:ring-primary-custom-400/20
-          peer-focus:border-primary-custom-600
-          dark:peer-hover:border-[#b6b6b9]
-          dark:peer-focus:border-dark-border-custom
-          dark:peer-focus:ring-dark-border-custom/20
-        `
-      : `
-        opacity-50
-        cursor-not-allowed
-      `;
-
-    // ===== CLASES PARA ESTADO CHECKED/INDETERMINATE =====
-    // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
-    const checkedClasses = checked || indeterminate
-      ? `
-        !bg-primary-custom-600
-        !border-primary-custom-500
-        shadow-button-inset
-        dark:!bg-dark-bg-inverse
-        dark:!border-dark-bg-inverse
-      `
-      : '';
-
-    // ===== COMBINAR TODAS LAS CLASES DEL CHECKBOX =====
-    const checkboxClasses = [
-      baseCheckboxClasses,
-      interactiveClasses,
-      checkedClasses,
-      disabled ? 'cursor-not-allowed' : 'cursor-pointer',
-    ]
-      .join(' ')
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    return (
-      <div className={`inline-flex gap-3 items-start ${className}`}>
-        {/* Checkbox Input Container */}
-        <div className="flex items-center justify-center h-5 w-4 shrink-0">
-          {/* Native Input (hidden but accessible) */}
-          <input
-            ref={combinedRef}
-            type="checkbox"
-            id={checkboxId}
-            checked={checked}
-            disabled={disabled}
-            onChange={onChange}
-            className="peer sr-only"
-            {...props}
-          />
-
-          {/* Custom Checkbox Visual */}
-          <label htmlFor={checkboxId} className={checkboxClasses}>
-            {/* Check Icon - Usar primary-inverse-content para consistencia */}
-            {checked && !indeterminate && (
-              <svg
-                className="w-3 h-3 text-primary-inverse-content pointer-events-none"
-                viewBox="0 0 12 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M10 3L4.5 8.5L2 6"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            )}
-
-            {/* Indeterminate Icon (minus) - Usar primary-inverse-content */}
-            {indeterminate && (
-              <svg
-                className="w-3 h-3 text-primary-inverse-content pointer-events-none"
-                viewBox="0 0 12 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2 6H10"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                />
-              </svg>
-            )}
-          </label>
-        </div>
-
-        {/* Label and Description */}
-        {(label || description) && (
-          <label
-            htmlFor={checkboxId}
-            className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${
-              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-            }`}
-          >
-            {/* Label - Label/Small (14px, Bold) */}
-            {label && (
-              <span className="font-bold text-content-primary dark:text-dark-content-primary">
-                {label}
-              </span>
-            )}
-            {/* Description - Paragraph/Small (14px, Regular) */}
-            {description && (
-              <span className="font-normal text-content-secondary dark:text-content-secondary">
-                {description}
-              </span>
-            )}
-          </label>
-        )}
-      </div>
-    );
-  }
-);
-
-Checkbox.displayName = 'Checkbox';
+import { forwardRef, useEffect, useRef } from 'react';
+import type { CheckboxProps } from './Checkbox.types';
+
+/**
+ * Checkbox del sistema de diseño Siesa
+ *
+ * Componente de checkbox con soporte completo para estados interactivos,
+ * indeterminate, y dark mode pixel-perfect según especificaciones de Figma.
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Sombra button-inset para estado checked
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con input nativo y ARIA
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label/Paragraph)
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Show on Events Page"
+ *   description="Make this event visible on your profile"
+ *   checked={true}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ * ```
+ */
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      label,
+      description,
+      checked = false,
+      indeterminate = false,
+      disabled = false,
+      className = '',
+      id,
+      onChange,
+      ...props
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const combinedRef = (ref as any) || inputRef;
+
+    // Generar ID único si no se proporciona
+    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+
+    // Manejar el estado indeterminate
+    useEffect(() => {
+      if (combinedRef.current) {
+        combinedRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate, combinedRef]);
+
+    // ===== CLASES BASE DEL CHECKBOX =====
+    const baseCheckboxClasses = `
+      w-4
+      h-4
+      rounded
+      border
+      border-border-primary
+      bg-bg-primary
+      transition-all
+      duration-150
+      flex
+      items-center
+      justify-center
+      dark:bg-dark-bg-primary
+      dark:border-dark-border-primary
+    `;
+
+    // ===== CLASES PARA ESTADOS INTERACTIVOS =====
+    const interactiveClasses = !disabled
+      ? (checked || indeterminate)
+        ? `
+          peer-hover:border-[#50a5f7]
+          peer-focus:ring-2
+          peer-focus:ring-primary-custom-400/20
+          peer-focus:border-primary-custom-600
+          dark:peer-hover:border-[#50a5f7]
+          dark:peer-focus:border-dark-border-custom
+          dark:peer-focus:ring-dark-border-custom/20
+        `
+        : `
+          peer-hover:border-[#b6b6b9]
+          peer-focus:ring-2
+          peer-focus:ring-primary-custom-400/20
+          peer-focus:border-primary-custom-600
+          dark:peer-hover:border-[#b6b6b9]
+          dark:peer-focus:border-dark-border-custom
+          dark:peer-focus:ring-dark-border-custom/20
+        `
+      : `
+        opacity-50
+        cursor-not-allowed
+      `;
+
+    // ===== CLASES PARA ESTADO CHECKED/INDETERMINATE =====
+    // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+    const checkedClasses = checked || indeterminate
+      ? `
+        !bg-primary-custom-600
+        !border-primary-custom-500
+        shadow-button-inset
+        dark:!bg-dark-bg-inverse
+        dark:!border-dark-bg-inverse
+      `
+      : '';
+
+    // ===== COMBINAR TODAS LAS CLASES DEL CHECKBOX =====
+    const checkboxClasses = [
+      baseCheckboxClasses,
+      interactiveClasses,
+      checkedClasses,
+      disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    ]
+      .join(' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    return (
+      <div className={`inline-flex gap-3 items-start ${className}`}>
+        {/* Checkbox Input Container */}
+        <div className="flex items-center justify-center h-5 w-4 shrink-0">
+          {/* Native Input (hidden but accessible) */}
+          <input
+            ref={combinedRef}
+            type="checkbox"
+            id={checkboxId}
+            checked={checked}
+            disabled={disabled}
+            onChange={onChange}
+            className="peer sr-only"
+            {...props}
+          />
+
+          {/* Custom Checkbox Visual */}
+          <label htmlFor={checkboxId} className={checkboxClasses}>
+            {/* Check Icon - Usar primary-inverse-content para consistencia */}
+            {checked && !indeterminate && (
+              <svg
+                className="w-3 h-3 text-primary-inverse-content pointer-events-none"
+                viewBox="0 0 12 12"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10 3L4.5 8.5L2 6"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+
+            {/* Indeterminate Icon (minus) - Usar primary-inverse-content */}
+            {indeterminate && (
+              <svg
+                className="w-3 h-3 text-primary-inverse-content pointer-events-none"
+                viewBox="0 0 12 12"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2 6H10"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                />
+              </svg>
+            )}
+          </label>
+        </div>
+
+        {/* Label and Description */}
+        {(label || description) && (
+          <label
+            htmlFor={checkboxId}
+            className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${
+              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+            }`}
+          >
+            {/* Label - Label/Small (14px, Bold) */}
+            {label && (
+              <span className="font-bold text-content-primary dark:text-dark-content-primary">
+                {label}
+              </span>
+            )}
+            {/* Description - Paragraph/Small (14px, Regular) */}
+            {description && (
+              <span className="font-normal text-content-secondary dark:text-content-secondary">
+                {description}
+              </span>
+            )}
+          </label>
+        )}
+      </div>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/components/Checkbox/Checkbox.types.ts

@@ -1,61 +1,61 @@
-import type { InputHTMLAttributes } from 'react';
-
-/**
- * Estados visuales del Checkbox
- */
-export type CheckboxState = 'default' | 'hover' | 'focus' | 'disabled';
-
-/**
- * Props del componente Checkbox
- *
- * Extiende HTMLInputElement con props adicionales específicas del componente.
- * Excluye 'type' y 'size' que son manejados internamente.
- */
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  /**
-   * Etiqueta del checkbox
-   * Tipografía: Label/Small (14px, Bold)
-   */
-  label?: string;
-
-  /**
-   * Descripción debajo del label
-   * Tipografía: Paragraph/Small (14px, Regular)
-   */
-  description?: string;
-
-  /**
-   * Si el checkbox está marcado
-   * @default false
-   */
-  checked?: boolean;
-
-  /**
-   * Si el checkbox está en estado indeterminado (parcialmente seleccionado)
-   * Útil para "select all" cuando solo algunos items están seleccionados
-   * @default false
-   */
-  indeterminate?: boolean;
-
-  /**
-   * Si el checkbox está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Clases CSS adicionales para el contenedor principal
-   */
-  className?: string;
-
-  /**
-   * ID único para el checkbox
-   * Si no se proporciona, se genera automáticamente
-   */
-  id?: string;
-
-  /**
-   * Callback cuando el estado del checkbox cambia
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
+import type { InputHTMLAttributes } from 'react';
+
+/**
+ * Estados visuales del Checkbox
+ */
+export type CheckboxState = 'default' | 'hover' | 'focus' | 'disabled';
+
+/**
+ * Props del componente Checkbox
+ *
+ * Extiende HTMLInputElement con props adicionales específicas del componente.
+ * Excluye 'type' y 'size' que son manejados internamente.
+ */
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  /**
+   * Etiqueta del checkbox
+   * Tipografía: Label/Small (14px, Bold)
+   */
+  label?: string;
+
+  /**
+   * Descripción debajo del label
+   * Tipografía: Paragraph/Small (14px, Regular)
+   */
+  description?: string;
+
+  /**
+   * Si el checkbox está marcado
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Si el checkbox está en estado indeterminado (parcialmente seleccionado)
+   * Útil para "select all" cuando solo algunos items están seleccionados
+   * @default false
+   */
+  indeterminate?: boolean;
+
+  /**
+   * Si el checkbox está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Clases CSS adicionales para el contenedor principal
+   */
+  className?: string;
+
+  /**
+   * ID único para el checkbox
+   * Si no se proporciona, se genera automáticamente
+   */
+  id?: string;
+
+  /**
+   * Callback cuando el estado del checkbox cambia
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}