siesa-ui-kit 1.0.1 → 1.0.2

package/src/components/SignUpView/icons.tsx

@@ -0,0 +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>
+);

package/src/components/SignUpView/index.ts

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

package/src/components/Switch/README.md

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