siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Quantity/Quantity.types.ts

@@ -1,70 +1,70 @@
-import type { HTMLAttributes } from 'react';
-
-/**
- * Props del componente Quantity
- */
-export interface QuantityProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  /**
-   * Valor actual del quantity
-   */
-  value?: number;
-
-  /**
-   * Valor por defecto
-   * @default 0
-   */
-  defaultValue?: number;
-
-  /**
-   * Callback cuando el valor cambia
-   */
-  onChange?: (value: number) => void;
-
-  /**
-   * Valor mínimo permitido
-   * @default 0
-   */
-  min?: number;
-
-  /**
-   * Valor máximo permitido
-   */
-  max?: number;
-
-  /**
-   * Label opcional
-   */
-  label?: string;
-
-  /**
-   * Texto del link opcional (aparece a la derecha del label)
-   */
-  linkText?: string;
-
-  /**
-   * Callback cuando se hace click en el link
-   */
-  onLinkClick?: () => void;
-
-  /**
-   * Texto de ayuda opcional
-   */
-  helperText?: string;
-
-  /**
-   * Si está en estado de error
-   * @default false
-   */
-  error?: boolean;
-
-  /**
-   * Si está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-}
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Props del componente Quantity
+ */
+export interface QuantityProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Valor actual del quantity
+   */
+  value?: number;
+
+  /**
+   * Valor por defecto
+   * @default 0
+   */
+  defaultValue?: number;
+
+  /**
+   * Callback cuando el valor cambia
+   */
+  onChange?: (value: number) => void;
+
+  /**
+   * Valor mínimo permitido
+   * @default 0
+   */
+  min?: number;
+
+  /**
+   * Valor máximo permitido
+   */
+  max?: number;
+
+  /**
+   * Label opcional
+   */
+  label?: string;
+
+  /**
+   * Texto del link opcional (aparece a la derecha del label)
+   */
+  linkText?: string;
+
+  /**
+   * Callback cuando se hace click en el link
+   */
+  onLinkClick?: () => void;
+
+  /**
+   * Texto de ayuda opcional
+   */
+  helperText?: string;
+
+  /**
+   * Si está en estado de error
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Si está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+}

package/src/components/Radio/Radio.tsx

@@ -1,170 +1,170 @@
-import { forwardRef } from 'react';
-import type { RadioProps } from './Radio.types';
-
-/**
- * Radio - Componente de radio button del sistema de diseño Siesa
- *
- * Campo de selección única diseñado para cumplir con las especificaciones
- * de Figma con soporte completo para dark mode y accesibilidad.
- *
- * 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
- * - Type safety con TypeScript estricto
- * - Accesibilidad con keyboard navigation y ARIA
- * - Inner shadow en estado checked según especificaciones Figma
- *
- * Estados soportados:
- * - Default, Hover, Focus, Disabled
- * - Checked / Unchecked
- * - Label y description opcionales
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * // Radio simple
- * <Radio
- *   label="Allow tickets to be resold"
- *   description="Customers can resell or transfer their tickets"
- *   value="resell"
- *   name="ticketOptions"
- *   checked={true}
- *   onChange={(e) => console.log(e.target.checked)}
- * />
- *
- * // Radio group
- * <div>
- *   <Radio label="Option 1" name="group" value="1" checked={selected === "1"} onChange={handleChange} />
- *   <Radio label="Option 2" name="group" value="2" checked={selected === "2"} onChange={handleChange} />
- * </div>
- * ```
- */
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  (
-    {
-      label,
-      description,
-      checked = false,
-      disabled = false,
-      className = '',
-      id,
-      onChange,
-      value,
-      name,
-      ...props
-    },
-    ref
-  ) => {
-    // Generar ID único si no se proporciona
-    const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
-
-    // ===== CLASES BASE DEL RADIO BUTTON =====
-    const baseRadioClasses = `
-      w-4
-      h-4
-      rounded-full
-      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
-      ? `
-        peer-hover:border-primary-custom-600
-        peer-focus:ring-2
-        peer-focus:ring-primary-custom-400
-        peer-focus:border-primary-custom-600
-        dark:peer-hover:border-dark-border-custom
-        dark:peer-focus:ring-dark-border-custom
-        dark:peer-focus:border-dark-border-custom
-      `
-      : `
-        opacity-50
-        cursor-not-allowed
-      `;
-
-    // ===== CLASES PARA CHECKED STATE =====
-    // Según Figma: bg #0e79fd, border #3c9bf6, inner shadow
-    const checkedClasses = checked
-      ? `
-        !bg-primary-custom-600
-        !border-primary-inverse-border
-        shadow-[0px_2px_0px_0px_inset_rgba(255,255,255,0.15)]
-        dark:!bg-dark-bg-inverse
-        dark:!border-dark-bg-inverse
-      `
-      : '';
-
-    return (
-      <div className={`flex gap-3 items-start ${className}`}>
-        {/* Radio Input Container */}
-        <div className="flex items-center justify-center h-5 w-4 shrink-0">
-          {/* Native Input (hidden but accessible) */}
-          <input
-            ref={ref}
-            type="radio"
-            id={radioId}
-            checked={checked}
-            disabled={disabled}
-            onChange={onChange}
-            value={value}
-            name={name}
-            className="peer sr-only"
-            {...props}
-          />
-
-          {/* Custom Radio Visual */}
-          <label
-            htmlFor={radioId}
-            className={`
-              ${baseRadioClasses}
-              ${interactiveClasses}
-              ${checkedClasses}
-              ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
-            `.trim().replace(/\s+/g, ' ')}
-          >
-            {/* Inner Circle (checked state) - 6px white dot según Figma */}
-            {checked && (
-              <div className="w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse" />
-            )}
-          </label>
-        </div>
-
-        {/* Label and Description */}
-        {(label || description) && (
-          <label
-            htmlFor={radioId}
-            className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${
-              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-            }`}
-          >
-            {label && (
-              <span className="font-bold text-content-primary dark:text-dark-content-primary">
-                {label}
-              </span>
-            )}
-            {description && (
-              <span className="font-normal text-content-secondary dark:text-content-secondary">
-                {description}
-              </span>
-            )}
-          </label>
-        )}
-      </div>
-    );
-  }
-);
-
-Radio.displayName = 'Radio';
+import { forwardRef } from 'react';
+import type { RadioProps } from './Radio.types';
+
+/**
+ * Radio - Componente de radio button del sistema de diseño Siesa
+ *
+ * Campo de selección única diseñado para cumplir con las especificaciones
+ * de Figma con soporte completo para dark mode y accesibilidad.
+ *
+ * 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
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con keyboard navigation y ARIA
+ * - Inner shadow en estado checked según especificaciones Figma
+ *
+ * Estados soportados:
+ * - Default, Hover, Focus, Disabled
+ * - Checked / Unchecked
+ * - Label y description opcionales
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Radio simple
+ * <Radio
+ *   label="Allow tickets to be resold"
+ *   description="Customers can resell or transfer their tickets"
+ *   value="resell"
+ *   name="ticketOptions"
+ *   checked={true}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ *
+ * // Radio group
+ * <div>
+ *   <Radio label="Option 1" name="group" value="1" checked={selected === "1"} onChange={handleChange} />
+ *   <Radio label="Option 2" name="group" value="2" checked={selected === "2"} onChange={handleChange} />
+ * </div>
+ * ```
+ */
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      label,
+      description,
+      checked = false,
+      disabled = false,
+      className = '',
+      id,
+      onChange,
+      value,
+      name,
+      ...props
+    },
+    ref
+  ) => {
+    // Generar ID único si no se proporciona
+    const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+
+    // ===== CLASES BASE DEL RADIO BUTTON =====
+    const baseRadioClasses = `
+      w-4
+      h-4
+      rounded-full
+      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
+      ? `
+        peer-hover:border-primary-custom-600
+        peer-focus:ring-2
+        peer-focus:ring-primary-custom-400
+        peer-focus:border-primary-custom-600
+        dark:peer-hover:border-dark-border-custom
+        dark:peer-focus:ring-dark-border-custom
+        dark:peer-focus:border-dark-border-custom
+      `
+      : `
+        opacity-50
+        cursor-not-allowed
+      `;
+
+    // ===== CLASES PARA CHECKED STATE =====
+    // Según Figma: bg #0e79fd, border #3c9bf6, inner shadow
+    const checkedClasses = checked
+      ? `
+        !bg-primary-custom-600
+        !border-primary-inverse-border
+        shadow-[0px_2px_0px_0px_inset_rgba(255,255,255,0.15)]
+        dark:!bg-dark-bg-inverse
+        dark:!border-dark-bg-inverse
+      `
+      : '';
+
+    return (
+      <div className={`flex gap-3 items-start ${className}`}>
+        {/* Radio Input Container */}
+        <div className="flex items-center justify-center h-5 w-4 shrink-0">
+          {/* Native Input (hidden but accessible) */}
+          <input
+            ref={ref}
+            type="radio"
+            id={radioId}
+            checked={checked}
+            disabled={disabled}
+            onChange={onChange}
+            value={value}
+            name={name}
+            className="peer sr-only"
+            {...props}
+          />
+
+          {/* Custom Radio Visual */}
+          <label
+            htmlFor={radioId}
+            className={`
+              ${baseRadioClasses}
+              ${interactiveClasses}
+              ${checkedClasses}
+              ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+            `.trim().replace(/\s+/g, ' ')}
+          >
+            {/* Inner Circle (checked state) - 6px white dot según Figma */}
+            {checked && (
+              <div className="w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse" />
+            )}
+          </label>
+        </div>
+
+        {/* Label and Description */}
+        {(label || description) && (
+          <label
+            htmlFor={radioId}
+            className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${
+              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+            }`}
+          >
+            {label && (
+              <span className="font-bold text-content-primary dark:text-dark-content-primary">
+                {label}
+              </span>
+            )}
+            {description && (
+              <span className="font-normal text-content-secondary dark:text-content-secondary">
+                {description}
+              </span>
+            )}
+          </label>
+        )}
+      </div>
+    );
+  }
+);
+
+Radio.displayName = 'Radio';