siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/SignUpView/SignUpView.types.ts

@@ -1,58 +1,58 @@
-/**
- * Props del componente SignUpView
- */
-export interface SignUpViewProps {
-  /**
-   * Handler para el submit del formulario de registro
-   * @param name - Nombre ingresado por el usuario
-   * @param email - Email ingresado por el usuario
-   * @param password - Contraseña ingresada por el usuario
-   */
-  onSubmit?: (name: string, email: string, password: string) => void;
-
-  /**
-   * Handler para el click en "Ya tengo una cuenta"
-   */
-  onSignIn?: () => void;
-
-  /**
-   * Handler para el click en "Condiciones de Uso"
-   */
-  onTermsClick?: () => void;
-
-  /**
-   * Handler para el click en "Políticas de Privacidad"
-   */
-  onPrivacyClick?: () => void;
-
-  /**
-   * Estado de carga del botón de submit
-   * @default false
-   */
-  isLoading?: boolean;
-
-  /**
-   * Mensaje de error general para mostrar en el formulario
-   */
-  errorMessage?: string;
-
-  /**
-   * Clases CSS adicionales para el contenedor
-   */
-  className?: string;
-
-  /**
-   * Si se muestra el fondo decorativo con imagen
-   * @default true
-   */
-  showBackground?: boolean;
-
-  /**
-   * Variante de visualización
-   * - 'responsive': Se adapta según el viewport (default)
-   * - 'mobile': Siempre se muestra como mobile sin efectos de card
-   * - 'desktop': Siempre se muestra como desktop con card
-   * @default 'responsive'
-   */
-  variant?: 'responsive' | 'mobile' | 'desktop';
-}
+/**
+ * Props del componente SignUpView
+ */
+export interface SignUpViewProps {
+  /**
+   * Handler para el submit del formulario de registro
+   * @param name - Nombre ingresado por el usuario
+   * @param email - Email ingresado por el usuario
+   * @param password - Contraseña ingresada por el usuario
+   */
+  onSubmit?: (name: string, email: string, password: string) => void;
+
+  /**
+   * Handler para el click en "Ya tengo una cuenta"
+   */
+  onSignIn?: () => void;
+
+  /**
+   * Handler para el click en "Condiciones de Uso"
+   */
+  onTermsClick?: () => void;
+
+  /**
+   * Handler para el click en "Políticas de Privacidad"
+   */
+  onPrivacyClick?: () => void;
+
+  /**
+   * Estado de carga del botón de submit
+   * @default false
+   */
+  isLoading?: boolean;
+
+  /**
+   * Mensaje de error general para mostrar en el formulario
+   */
+  errorMessage?: string;
+
+  /**
+   * Clases CSS adicionales para el contenedor
+   */
+  className?: string;
+
+  /**
+   * Si se muestra el fondo decorativo con imagen
+   * @default true
+   */
+  showBackground?: boolean;
+
+  /**
+   * Variante de visualización
+   * - 'responsive': Se adapta según el viewport (default)
+   * - 'mobile': Siempre se muestra como mobile sin efectos de card
+   * - 'desktop': Siempre se muestra como desktop con card
+   * @default 'responsive'
+   */
+  variant?: 'responsive' | 'mobile' | 'desktop';
+}

package/src/components/SignUpView/icons.tsx

@@ -1,71 +1,71 @@
-import React from 'react';
-
-/**
- * Icono de círculo de usuario para el input de nombre
- */
-export const UserCircleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-5-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 9c-1.825 0-3.422.977-4.295 2.437A5.49 5.49 0 0 0 8 13.5a5.49 5.49 0 0 0 4.294-2.063A4.997 4.997 0 0 0 8 9Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Icono de sobre (envelope) para el input de email
- */
-export const EnvelopeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
-    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
-  </svg>
-);
-
-/**
- * Icono de candado cerrado (lock) para el input de contraseña
- */
-export const LockClosedIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Icono de ojo (eye) para mostrar/ocultar contraseña
- */
-export const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-    <path
-      fillRule="evenodd"
-      d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .56A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
+import React from 'react';
+
+/**
+ * Icono de círculo de usuario para el input de nombre
+ */
+export const UserCircleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-5-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 9c-1.825 0-3.422.977-4.295 2.437A5.49 5.49 0 0 0 8 13.5a5.49 5.49 0 0 0 4.294-2.063A4.997 4.997 0 0 0 8 9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de sobre (envelope) para el input de email
+ */
+export const EnvelopeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+  </svg>
+);
+
+/**
+ * Icono de candado cerrado (lock) para el input de contraseña
+ */
+export const LockClosedIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de ojo (eye) para mostrar/ocultar contraseña
+ */
+export const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+    <path
+      fillRule="evenodd"
+      d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .56A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/components/SignUpView/index.ts

@@ -1,3 +1,3 @@
-export { SignUpView } from './SignUpView';
-export type { SignUpViewProps } from './SignUpView.types';
-export { UserCircleIcon, EnvelopeIcon, LockClosedIcon, EyeIcon } from './icons';
+export { SignUpView } from './SignUpView';
+export type { SignUpViewProps } from './SignUpView.types';
+export { UserCircleIcon, EnvelopeIcon, LockClosedIcon, EyeIcon } from './icons';

package/src/components/Switch/README.md

@@ -1,112 +1,112 @@
-# Switch
-
-Componente de switch del sistema de diseño Siesa para activación/desactivación de opciones.
-
-## Uso Básico
-
-```tsx
-import { Switch } from './Switch';
-
-// Switch simple (label a la izquierda - default)
-<Switch
-  label="Activar notificaciones"
-  checked={isEnabled}
-  onChange={(e) => setIsEnabled(e.target.checked)}
-/>
-
-// Con descripción
-<Switch
-  label="Permitir inserción"
-  description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-  checked={isEnabled}
-  onChange={(e) => setIsEnabled(e.target.checked)}
-/>
-
-// Label a la derecha (trailing)
-<Switch
-  label="Activar notificaciones"
-  labelPosition="trailing"
-  checked={isEnabled}
-  onChange={(e) => setIsEnabled(e.target.checked)}
-/>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `label` | `string` | - | Etiqueta del switch |
-| `description` | `string` | - | Descripción debajo del label |
-| `labelPosition` | `'leading' \| 'trailing'` | `'leading'` | Posición del label respecto al switch |
-| `checked` | `boolean` | `false` | Si el switch está activado |
-| `disabled` | `boolean` | `false` | Si el switch está deshabilitado |
-| `onChange` | `(e: ChangeEvent) => void` | - | Callback cuando cambia el estado |
-| `ariaLabel` | `string` | - | Label para accesibilidad (ARIA) |
-| `className` | `string` | `''` | Clases CSS adicionales |
-
-## Posición del Label
-
-El componente soporta dos posiciones para el label:
-
-- **leading** (default): Label a la izquierda, switch a la derecha
-- **trailing**: Switch a la izquierda, label a la derecha
-
-```tsx
-// Leading (default)
-<Switch label="Opción" labelPosition="leading" />
-// Resultado: [Label] [Switch]
-
-// Trailing
-<Switch label="Opción" labelPosition="trailing" />
-// Resultado: [Switch] [Label]
-```
-
-## Estados
-
-El switch soporta los siguientes estados:
-
-- **Default OFF**: Fondo `#fafafa`, borde `#e4e4e7`
-- **Default ON**: Fondo `#0e79fd`, borde `#3c9bf6`
-- **Hover OFF**: Borde cambia a `#b6b6b9`
-- **Hover ON**: Borde cambia a `#307cc5`
-- **Focus**: Shadow ring con `#60b6fa` (4px) + `#dbeefe` (2px)
-- **Disabled**: Opacidad 50%
-
-## Dark Mode
-
-El componente tiene soporte completo para dark mode:
-
-- **Track OFF Dark**: Fondo `#18181b`, borde `#71717a`
-- **Track ON Dark**: Fondo `#0e79fd`, borde `#3c9bf6`
-- **Focus Dark**: Mismo shadow ring que light mode
-
-## Dimensiones
-
-- **Track**: 32x20px
-- **Button**: 16x16px
-- **Border radius**: 12px (rounded-xl)
-- **Posición OFF**: left 1px
-- **Posición ON**: left 13px
-
-## Accesibilidad
-
-- Usa un `<input type="checkbox">` nativo oculto para accesibilidad
-- Soporte completo de teclado (Tab, Space)
-- `aria-label` configurable
-- Labels clicables para mejor UX
-
-## Archivos
-
-```
-Switch/
-├── Switch.tsx           # Componente principal
-├── Switch.types.ts      # TypeScript types
-├── Switch.stories.tsx   # Storybook stories
-├── index.ts             # Exports
-└── README.md            # Documentación
-```
-
-## Referencias
-
-- **Figma**: [Switch Component](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4028-7829)
-- **Docs**: `docs/colors.md`, `docs/typography.md`
+# Switch
+
+Componente de switch del sistema de diseño Siesa para activación/desactivación de opciones.
+
+## Uso Básico
+
+```tsx
+import { Switch } from './Switch';
+
+// Switch simple (label a la izquierda - default)
+<Switch
+  label="Activar notificaciones"
+  checked={isEnabled}
+  onChange={(e) => setIsEnabled(e.target.checked)}
+/>
+
+// Con descripción
+<Switch
+  label="Permitir inserción"
+  description="Permite que otros inserten los detalles de tu evento en su propio sitio."
+  checked={isEnabled}
+  onChange={(e) => setIsEnabled(e.target.checked)}
+/>
+
+// Label a la derecha (trailing)
+<Switch
+  label="Activar notificaciones"
+  labelPosition="trailing"
+  checked={isEnabled}
+  onChange={(e) => setIsEnabled(e.target.checked)}
+/>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `label` | `string` | - | Etiqueta del switch |
+| `description` | `string` | - | Descripción debajo del label |
+| `labelPosition` | `'leading' \| 'trailing'` | `'leading'` | Posición del label respecto al switch |
+| `checked` | `boolean` | `false` | Si el switch está activado |
+| `disabled` | `boolean` | `false` | Si el switch está deshabilitado |
+| `onChange` | `(e: ChangeEvent) => void` | - | Callback cuando cambia el estado |
+| `ariaLabel` | `string` | - | Label para accesibilidad (ARIA) |
+| `className` | `string` | `''` | Clases CSS adicionales |
+
+## Posición del Label
+
+El componente soporta dos posiciones para el label:
+
+- **leading** (default): Label a la izquierda, switch a la derecha
+- **trailing**: Switch a la izquierda, label a la derecha
+
+```tsx
+// Leading (default)
+<Switch label="Opción" labelPosition="leading" />
+// Resultado: [Label] [Switch]
+
+// Trailing
+<Switch label="Opción" labelPosition="trailing" />
+// Resultado: [Switch] [Label]
+```
+
+## Estados
+
+El switch soporta los siguientes estados:
+
+- **Default OFF**: Fondo `#fafafa`, borde `#e4e4e7`
+- **Default ON**: Fondo `#0e79fd`, borde `#3c9bf6`
+- **Hover OFF**: Borde cambia a `#b6b6b9`
+- **Hover ON**: Borde cambia a `#307cc5`
+- **Focus**: Shadow ring con `#60b6fa` (4px) + `#dbeefe` (2px)
+- **Disabled**: Opacidad 50%
+
+## Dark Mode
+
+El componente tiene soporte completo para dark mode:
+
+- **Track OFF Dark**: Fondo `#18181b`, borde `#71717a`
+- **Track ON Dark**: Fondo `#0e79fd`, borde `#3c9bf6`
+- **Focus Dark**: Mismo shadow ring que light mode
+
+## Dimensiones
+
+- **Track**: 32x20px
+- **Button**: 16x16px
+- **Border radius**: 12px (rounded-xl)
+- **Posición OFF**: left 1px
+- **Posición ON**: left 13px
+
+## Accesibilidad
+
+- Usa un `<input type="checkbox">` nativo oculto para accesibilidad
+- Soporte completo de teclado (Tab, Space)
+- `aria-label` configurable
+- Labels clicables para mejor UX
+
+## Archivos
+
+```
+Switch/
+├── Switch.tsx           # Componente principal
+├── Switch.types.ts      # TypeScript types
+├── Switch.stories.tsx   # Storybook stories
+├── index.ts             # Exports
+└── README.md            # Documentación
+```
+
+## Referencias
+
+- **Figma**: [Switch Component](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4028-7829)
+- **Docs**: `docs/colors.md`, `docs/typography.md`