siesa-ui-kit 1.0.2 → 1.0.3

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

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

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

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

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

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