siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/SignUpView/icons.tsx

@@ -1,71 +0,0 @@
-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/Switch/README.md

@@ -1,112 +0,0 @@
-# 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`