siesa-ui-kit 1.0.0 → 1.0.2

package/src/views/ListView/ListView.types.ts

@@ -0,0 +1,211 @@
+import type { ReactNode, ReactElement } from 'react';
+import type { BadgeColor } from '../../components/Badge/Badge.types';
+
+/**
+ * Interfaz para los items de navegación (Navigation Rail)
+ */
+export interface ListViewNavigationItem {
+  /** ID único del item */
+  id: string;
+  /** Icono del item */
+  icon: ReactNode;
+  /** Label del item */
+  label: string;
+  /** Si el item está seleccionado */
+  selected?: boolean;
+  /** Si el item está deshabilitado */
+  disabled?: boolean;
+  /** Badge de notificación */
+  badge?: boolean;
+  /** Contador de badge */
+  badgeCount?: number;
+  /** Handler de click */
+  onClick?: () => void;
+}
+
+/**
+ * Interfaz para los filtros rápidos (badges en la barra de navegación)
+ */
+export interface ListViewQuickFilter {
+  /** ID único del filtro */
+  id: string;
+  /** Label del filtro */
+  label: string;
+  /** Color del badge */
+  color: BadgeColor;
+  /** Icono del filtro */
+  icon?: ReactElement;
+  /** Si el filtro está activo */
+  active?: boolean;
+  /** Handler de click */
+  onClick?: () => void;
+}
+
+/**
+ * Interfaz para las columnas de la tabla
+ */
+export interface ListViewColumn<T = any> {
+  /** Título del header */
+  header: string;
+  /** Key del objeto para acceder al valor */
+  accessor: keyof T | ((row: T) => any);
+  /** Si es sortable */
+  sortable?: boolean;
+  /** Render custom */
+  render?: (value: any, row: T, index: number) => ReactNode;
+  /** Alineación */
+  align?: 'left' | 'center' | 'right';
+  /** Ancho */
+  width?: string;
+}
+
+/**
+ * Interfaz para los datos del dropdown de usuario
+ */
+export interface ListViewUserDropdown {
+  /** URL del avatar */
+  avatar: string;
+  /** Nombre del usuario */
+  name: string;
+  /** Email o rol del usuario */
+  email?: string;
+  /** Rol del usuario */
+  role?: string;
+  /** Handler del click en menú */
+  onMenuClick?: () => void;
+}
+
+/**
+ * Interfaz para las notificaciones
+ */
+export interface ListViewNotifications {
+  /** Contador del carrito */
+  cart?: number;
+  /** Si tiene notificaciones de campana */
+  bell?: boolean;
+}
+
+/**
+ * Interfaz para los botones de acción
+ */
+export interface ListViewActionButton {
+  /** ID del botón */
+  id: string;
+  /** Label del botón */
+  label: string;
+  /** Icono del botón */
+  icon?: ReactNode;
+  /** Handler del click */
+  onClick?: () => void;
+  /** Variante del botón */
+  variant?: 'primary' | 'secondary';
+}
+
+/**
+ * Dirección de ordenamiento
+ */
+export type ListViewSortDirection = 'asc' | 'desc' | null;
+
+/**
+ * Props del componente ListView
+ */
+export interface ListViewProps<T = any> {
+  /** Título de la vista */
+  title?: string;
+
+  /** Título del navbar */
+  navbarTitle?: string;
+
+  /** Título de la tabla */
+  tableTitle?: string;
+
+  /** Columnas de la tabla */
+  columns: ListViewColumn<T>[];
+
+  /** Datos de la tabla */
+  data: T[];
+
+  /** Items de navegación lateral */
+  navigationItems?: ListViewNavigationItem[];
+
+  /** Filtros rápidos */
+  quickFilters?: ListViewQuickFilter[];
+
+  /** Botones de acción */
+  actionButtons?: ListViewActionButton[];
+
+  /** Dropdown del usuario */
+  userDropdown?: ListViewUserDropdown;
+
+  /** Notificaciones */
+  notifications?: ListViewNotifications;
+
+  /** Badge de ambiente */
+  environmentBadge?: string;
+
+  /** Si mostrar el FAB en navigation rail */
+  showFab?: boolean;
+
+  /** Icono del FAB */
+  fabIcon?: ReactNode;
+
+  /** Handler del FAB */
+  onFabClick?: () => void;
+
+  /** Handler de búsqueda */
+  onSearch?: (query: string) => void;
+
+  /** Placeholder del buscador */
+  searchPlaceholder?: string;
+
+  /** Handler de ordenamiento */
+  onSort?: (column: keyof T | string, direction: ListViewSortDirection) => void;
+
+  /** Columna de ordenamiento actual */
+  sortColumn?: keyof T | string;
+
+  /** Dirección de ordenamiento actual */
+  sortDirection?: ListViewSortDirection;
+
+  /** Props de paginación */
+  pagination?: {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    previousLabel?: string;
+    nextLabel?: string;
+  };
+
+  /** Si está cargando */
+  loading?: boolean;
+
+  /** Número de filas skeleton */
+  loadingRows?: number;
+
+  /** Mensaje cuando no hay datos */
+  emptyMessage?: string;
+
+  /** Clases adicionales */
+  className?: string;
+
+  /** ID de navegación seleccionado */
+  selectedNavId?: string;
+
+  /** Handler de selección de navegación */
+  onNavSelect?: (id: string) => void;
+
+  /** Handler click en carrito */
+  onCartClick?: () => void;
+
+  /** Handler click en notificaciones */
+  onNotificationsClick?: () => void;
+
+  /** Opciones del dropdown de vista */
+  viewOptions?: Array<{ id: string; label: string }>;
+
+  /** Opción de vista seleccionada */
+  selectedViewOption?: string;
+
+  /** Handler de cambio de opción de vista */
+  onViewOptionChange?: (id: string) => void;
+}

package/src/views/ListView/icons.tsx

@@ -0,0 +1,282 @@
+import React from 'react';
+
+/**
+ * Iconos para ListView del sistema de diseño Siesa
+ * Basados en Heroicons Micro (16x16)
+ */
+
+export const HomeIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8.543 2.232a.75.75 0 0 0-1.085 0l-5.25 5.5A.75.75 0 0 0 2.75 9H4v4a1 1 0 0 0 1 1h1.5a.5.5 0 0 0 .5-.5v-2a1 1 0 0 1 1-1h.5a1 1 0 0 1 1 1v2a.5.5 0 0 0 .5.5H12a1 1 0 0 0 1-1V9h1.25a.75.75 0 0 0 .543-1.268l-5.25-5.5Z" />
+  </svg>
+);
+
+export const GlobeAltIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM5.37 2.822a6.493 6.493 0 0 0-2.818 3.428h2.103c.088-.907.254-1.778.494-2.595a8.932 8.932 0 0 1 .221-.833ZM1.5 8c0 .522.062 1.03.179 1.516l.135.484h2.49a16.15 16.15 0 0 1 0-4H1.815L1.68 6.484A6.533 6.533 0 0 0 1.5 8Zm.552 2.75A6.493 6.493 0 0 0 5.37 14.18a8.932 8.932 0 0 1-.221-.833 13.2 13.2 0 0 1-.494-2.595H2.552Zm4.058 0c.083.78.23 1.497.429 2.128.197.622.423 1.07.649 1.357.225.286.401.265.312.265.089 0 .265.021.49-.265.226-.287.452-.735.649-1.357.199-.631.346-1.348.429-2.128H6.11Zm4.234 0a13.198 13.198 0 0 1-.494 2.595 8.938 8.938 0 0 1-.22.833 6.493 6.493 0 0 0 2.817-3.428h-2.103Zm2.104-2h-2.48a16.15 16.15 0 0 0 0-4h2.48l.135.484A6.538 6.538 0 0 1 14.5 8a6.538 6.538 0 0 1-.179 1.516l-.135.484h.162Zm-2.818-4.928c.167.251.394.699.221.833.24.817.406 1.688.494 2.595h2.103a6.493 6.493 0 0 0-2.818-3.428ZM9.89 6h-3.78c.083-.78.23-1.497.429-2.128.197-.622.423-1.07.649-1.357.225-.286.401-.265.312-.265.089 0 .265-.021.49.265.226.287.452.735.649 1.357.199.631.346 1.348.429 2.128Zm-4.234 0H3.553a6.493 6.493 0 0 1 2.818-3.428 8.932 8.932 0 0 0-.221.833c-.24.817-.406 1.688-.494 2.595Zm.144 2a14.65 14.65 0 0 0 0 4h4.4a14.65 14.65 0 0 0 0-4H5.8Z" />
+  </svg>
+);
+
+export const DocumentTextIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6.414A2 2 0 0 0 13.414 5L10 1.586A2 2 0 0 0 8.586 1H4Zm1 5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5Zm-.5 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Zm.5 1.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1H5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const CloudIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M1 9.5A3.5 3.5 0 0 0 4.5 13H12a3 3 0 0 0 .917-5.857 2.503 2.503 0 0 0-3.198-3.019 3.5 3.5 0 0 0-6.628 2.171A3.5 3.5 0 0 0 1 9.5Z" />
+  </svg>
+);
+
+export const SquaresPlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2 4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4ZM10 4a2 2 0 0 1 2-2h.5a.5.5 0 0 1 0 1H12a1 1 0 0 0-1 1v.5a.5.5 0 0 1-1 0V4ZM2 12a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2ZM10.5 8a.5.5 0 0 0-.5.5V10H8.5a.5.5 0 0 0 0 1H10v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H11V8.5a.5.5 0 0 0-.5-.5Z" />
+  </svg>
+);
+
+export const MagnifyingGlassIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+  </svg>
+);
+
+export const ListBulletIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM4.75 3.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5ZM4 8a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 4 8Zm.75 3.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5ZM3 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm-.5 4.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const FunnelIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M14 2H2c-.55 0-.95.538-.75 1.032l3 7.5c.127.318.44.528.783.528h5.934c.343 0 .656-.21.783-.528l3-7.5C14.95 2.538 14.55 2 14 2Z" />
+    <path d="M6 12.25v1.25a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1.25H6Z" />
+  </svg>
+);
+
+export const DocumentCheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6.414A2 2 0 0 0 13.414 5L10 1.586A2 2 0 0 0 8.586 1H4Zm6.78 5.28a.75.75 0 1 0-1.06-1.06L7 8.94 5.78 7.72a.75.75 0 0 0-1.06 1.06l1.75 1.75a.75.75 0 0 0 1.06 0l3.25-3.25Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const DocumentMinusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6.414A2 2 0 0 0 13.414 5L10 1.586A2 2 0 0 0 8.586 1H4Zm1 6.25a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5H5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const DocumentArrowUpIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6.414A2 2 0 0 0 13.414 5L10 1.586A2 2 0 0 0 8.586 1H4Zm4.53 4.22a.75.75 0 0 0-1.06 0L5.22 8.47a.75.75 0 1 0 1.06 1.06l.97-.97v2.69a.75.75 0 0 0 1.5 0V8.56l.97.97a.75.75 0 1 0 1.06-1.06L8.53 6.22Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const BellIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M12 5a4 4 0 0 0-8 0v2.379c0 .398-.158.779-.44 1.06L2.294 9.707a1 1 0 0 0 .707 1.707h9.998a1 1 0 0 0 .707-1.707l-1.266-1.268A1.5 1.5 0 0 1 12 7.379V5ZM6.268 13.682a.75.75 0 0 0 1.04.199 1.496 1.496 0 0 0 1.385 0 .75.75 0 1 0-.839-1.244.003.003 0 0 1-.004.003.003.003 0 0 1-.004-.003.75.75 0 0 0-1.244.199.75.75 0 0 0 .666.846Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const ArrowLongLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M14 8a.75.75 0 0 1-.75.75H3.81l2.72 2.72a.75.75 0 1 1-1.06 1.06l-4-4a.75.75 0 0 1 0-1.06l4-4a.75.75 0 0 1 1.06 1.06L3.81 7.25h9.44A.75.75 0 0 1 14 8Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const ArrowLongRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      d="M2 8a.75.75 0 0 1 .75-.75h9.44l-2.72-2.72a.75.75 0 0 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 1 1-1.06-1.06l2.72-2.72H2.75A.75.75 0 0 1 2 8Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const EllipsisHorizontalIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" />
+  </svg>
+);
+
+export const EnvelopeIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <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>
+);

package/src/views/ListView/index.ts

@@ -0,0 +1,11 @@
+export { ListView } from './ListView';
+export type {
+  ListViewProps,
+  ListViewColumn,
+  ListViewNavigationItem,
+  ListViewQuickFilter,
+  ListViewUserDropdown,
+  ListViewNotifications,
+  ListViewActionButton,
+  ListViewSortDirection,
+} from './ListView.types';

package/src/views/LoginView/LoginView.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LoginView } from './LoginView';
+
+const meta = {
+  title: 'Siesa UI Kit/Views/LoginView',
+  component: LoginView,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Vista completa de inicio de sesión del sistema Siesa.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onSubmit: {
+      action: 'submit',
+      description: 'Handler cuando se envía el formulario con (email, password)',
+    },
+    onForgotPassword: {
+      action: 'forgot-password',
+      description: 'Handler cuando se hace click en "Olvidé mi Contraseña"',
+    },
+    onSignUp: {
+      action: 'sign-up',
+      description: 'Handler cuando se hace click en "¿No tienes una cuenta?"',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Si el formulario está en estado de carga',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Mensaje de error general a mostrar',
+    },
+    showBackground: {
+      control: 'boolean',
+      description: 'Si se muestra el fondo decorativo con imagen',
+    },
+    variant: {
+      control: 'select',
+      options: ['responsive', 'mobile', 'desktop'],
+      description: 'Variante de visualización: responsive (adapta al viewport), mobile (siempre mobile), desktop (siempre desktop)',
+      defaultValue: 'responsive',
+    },
+  },
+} satisfies Meta<typeof LoginView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. DESKTOP
+// ============================================
+export const Desktop: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <LoginView
+        onSubmit={(email, password) => {
+          console.log('Login:', { email, password });
+          alert(`Login con:\nEmail: ${email}\nPassword: ${password}`);
+        }}
+        onForgotPassword={() => {
+          console.log('Forgot password clicked');
+          alert('Redirigiendo a recuperación de contraseña...');
+        }}
+        onSignUp={() => {
+          console.log('Sign up clicked');
+          alert('Redirigiendo a registro...');
+        }}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. CON ESTADO DE CARGA
+// ============================================
+export const Loading: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <LoginView
+        isLoading={true}
+        onSubmit={(email, password) => {
+          console.log('Login:', { email, password });
+        }}
+        onForgotPassword={() => {
+          console.log('Forgot password clicked');
+        }}
+        onSignUp={() => {
+          console.log('Sign up clicked');
+        }}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON MENSAJE DE ERROR
+// ============================================
+export const WithError: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <LoginView
+        errorMessage="Credenciales incorrectas. Por favor verifica tu email y contraseña."
+        onSubmit={(email, password) => {
+          console.log('Login:', { email, password });
+          alert(`Login con:\nEmail: ${email}\nPassword: ${password}`);
+        }}
+        onForgotPassword={() => {
+          console.log('Forgot password clicked');
+          alert('Redirigiendo a recuperación de contraseña...');
+        }}
+        onSignUp={() => {
+          console.log('Sign up clicked');
+          alert('Redirigiendo a registro...');
+        }}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 4. SIN FONDO DECORATIVO
+// ============================================
+export const WithoutBackground: Story = {
+  render: () => (
+    <div className="min-h-screen w-full bg-gray-100 dark:bg-gray-900">
+      <LoginView
+        showBackground={false}
+        onSubmit={(email, password) => {
+          console.log('Login:', { email, password });
+          alert(`Login con:\nEmail: ${email}\nPassword: ${password}`);
+        }}
+        onForgotPassword={() => {
+          console.log('Forgot password clicked');
+          alert('Redirigiendo a recuperación de contraseña...');
+        }}
+        onSignUp={() => {
+          console.log('Sign up clicked');
+          alert('Redirigiendo a registro...');
+        }}
+      />
+    </div>
+  ),
+};
+