siesa-ui-kit 1.0.2 → 1.0.4

package/src/views/TableLayoutView/TableLayoutView.types.ts

@@ -1,209 +1,209 @@
-import type { ConventionStatus } from '../../components/POSConvention/POSConvention.types';
-
-/**
- * Estado de una ubicación/salón
- */
-export interface Location {
-  /**
-   * ID único de la ubicación
-   */
-  id: string;
-
-  /**
-   * Nombre de la ubicación (ej: "Antejardín", "Terraza", "Bar")
-   */
-  name: string;
-
-  /**
-   * Estado general de la ubicación
-   */
-  status: ConventionStatus;
-
-  /**
-   * Capacidad actual (mesas ocupadas/total)
-   */
-  capacity: {
-    current: number;
-    total: number;
-  };
-}
-
-/**
- * Estado de mesa compatible con POSTable
- * Nota: 'busy' se usa en lugar de 'occupied' para mantener compatibilidad con POSTable
- */
-export type TableStatus = 'available' | 'busy' | 'reserved';
-
-/**
- * Mesa en el layout
- */
-export interface TableItem {
-  /**
-   * Número de la mesa (ej: "01", "02")
-   */
-  tableNumber: string;
-
-  /**
-   * Estado actual de la mesa
-   * Nota: usa 'busy' en lugar de 'occupied' para POSTable
-   */
-  status: TableStatus;
-
-  /**
-   * Forma de la mesa
-   */
-  shape: 'square' | 'circle' | 'rectangle' | 'oval';
-
-  /**
-   * Cantidad de sillas (2, 4, 6, 8)
-   */
-  chairs: 2 | 4 | 6 | 8;
-
-  /**
-   * Si la mesa está actualmente seleccionada
-   */
-  isActive?: boolean;
-
-  /**
-   * Posición en el grid (opcional, para layout libre)
-   */
-  position?: {
-    x: number;
-    y: number;
-  };
-}
-
-/**
- * Props del componente TableLayoutView
- */
-export interface TableLayoutViewProps {
-  /**
-   * Lista de ubicaciones/salones disponibles
-   */
-  locations?: Location[];
-
-  /**
-   * ID de la ubicación actualmente seleccionada
-   */
-  activeLocationId?: string;
-
-  /**
-   * Lista de mesas en el layout actual
-   */
-  tables?: TableItem[];
-
-  /**
-   * Título del área de mesas (ej: "Mesas de Antejardín")
-   */
-  tablesTitle?: string;
-
-  /**
-   * Si se está mostrando el panel de selección de personas
-   */
-  showPeopleCountPanel?: boolean;
-
-  /**
-   * Información de la mesa seleccionada para el panel
-   */
-  selectedTable?: {
-    locationName: string;
-    tableName: string;
-  };
-
-  /**
-   * Cantidad de personas seleccionada
-   */
-  peopleCount?: number;
-
-  // ===== CALLBACKS =====
-
-  /**
-   * Callback cuando se selecciona una ubicación/salón
-   */
-  onLocationSelect?: (locationId: string) => void;
-
-  /**
-   * Callback cuando se selecciona una mesa
-   */
-  onTableSelect?: (tableNumber: string) => void;
-
-  /**
-   * Callback cuando se hace clic en "Crear Mesas"
-   */
-  onCreateTables?: () => void;
-
-  /**
-   * Callback cuando se hace clic en "Unir Mesas"
-   */
-  onMergeTables?: () => void;
-
-  /**
-   * Callback cuando se hace clic en "Separar Mesas"
-   */
-  onSplitTables?: () => void;
-
-  /**
-   * Callback cuando se selecciona un número de personas
-   */
-  onPeopleCountSelect?: (count: number) => void;
-
-  /**
-   * Callback cuando se hace clic en "Asignar"
-   */
-  onAssignTable?: () => void;
-
-  /**
-   * Callback cuando se hace clic en "Transferir"
-   */
-  onTransferTable?: () => void;
-
-  /**
-   * Callback cuando se hace clic en "Cubiertos"
-   */
-  onSetCutlery?: () => void;
-
-  /**
-   * Callback cuando se cierra el panel de personas
-   */
-  onClosePeoplePanel?: () => void;
-
-  /**
-   * Callback cuando cambia el switch de la mesa
-   */
-  onTableSwitchChange?: (checked: boolean) => void;
-
-  // ===== ESTADOS DE CARGA =====
-
-  /**
-   * Si se está cargando información
-   */
-  isLoading?: boolean;
-
-  /**
-   * Mensaje de error (si existe)
-   */
-  errorMessage?: string;
-
-  // ===== CUSTOMIZACIÓN =====
-
-  /**
-   * Tipo de layout para las mesas:
-   * - 'grid': Grid automático con separación uniforme (por defecto)
-   * - 'free': Posicionamiento libre usando position.x/y de cada mesa
-   */
-  tableLayout?: 'grid' | 'free';
-
-  /**
-   * Clases CSS adicionales para el contenedor
-   */
-  className?: string;
-
-  /**
-   * Información del usuario para el navbar
-   */
-  userInfo?: {
-    avatar: string;
-    name: string;
-    role: string;
-  };
-}
+import type { ConventionStatus } from '../../components/POSConvention/POSConvention.types';
+
+/**
+ * Estado de una ubicación/salón
+ */
+export interface Location {
+  /**
+   * ID único de la ubicación
+   */
+  id: string;
+
+  /**
+   * Nombre de la ubicación (ej: "Antejardín", "Terraza", "Bar")
+   */
+  name: string;
+
+  /**
+   * Estado general de la ubicación
+   */
+  status: ConventionStatus;
+
+  /**
+   * Capacidad actual (mesas ocupadas/total)
+   */
+  capacity: {
+    current: number;
+    total: number;
+  };
+}
+
+/**
+ * Estado de mesa compatible con POSTable
+ * Nota: 'busy' se usa en lugar de 'occupied' para mantener compatibilidad con POSTable
+ */
+export type TableStatus = 'available' | 'busy' | 'reserved';
+
+/**
+ * Mesa en el layout
+ */
+export interface TableItem {
+  /**
+   * Número de la mesa (ej: "01", "02")
+   */
+  tableNumber: string;
+
+  /**
+   * Estado actual de la mesa
+   * Nota: usa 'busy' en lugar de 'occupied' para POSTable
+   */
+  status: TableStatus;
+
+  /**
+   * Forma de la mesa
+   */
+  shape: 'square' | 'circle' | 'rectangle' | 'oval';
+
+  /**
+   * Cantidad de sillas (2, 4, 6, 8)
+   */
+  chairs: 2 | 4 | 6 | 8;
+
+  /**
+   * Si la mesa está actualmente seleccionada
+   */
+  isActive?: boolean;
+
+  /**
+   * Posición en el grid (opcional, para layout libre)
+   */
+  position?: {
+    x: number;
+    y: number;
+  };
+}
+
+/**
+ * Props del componente TableLayoutView
+ */
+export interface TableLayoutViewProps {
+  /**
+   * Lista de ubicaciones/salones disponibles
+   */
+  locations?: Location[];
+
+  /**
+   * ID de la ubicación actualmente seleccionada
+   */
+  activeLocationId?: string;
+
+  /**
+   * Lista de mesas en el layout actual
+   */
+  tables?: TableItem[];
+
+  /**
+   * Título del área de mesas (ej: "Mesas de Antejardín")
+   */
+  tablesTitle?: string;
+
+  /**
+   * Si se está mostrando el panel de selección de personas
+   */
+  showPeopleCountPanel?: boolean;
+
+  /**
+   * Información de la mesa seleccionada para el panel
+   */
+  selectedTable?: {
+    locationName: string;
+    tableName: string;
+  };
+
+  /**
+   * Cantidad de personas seleccionada
+   */
+  peopleCount?: number;
+
+  // ===== CALLBACKS =====
+
+  /**
+   * Callback cuando se selecciona una ubicación/salón
+   */
+  onLocationSelect?: (locationId: string) => void;
+
+  /**
+   * Callback cuando se selecciona una mesa
+   */
+  onTableSelect?: (tableNumber: string) => void;
+
+  /**
+   * Callback cuando se hace clic en "Crear Mesas"
+   */
+  onCreateTables?: () => void;
+
+  /**
+   * Callback cuando se hace clic en "Unir Mesas"
+   */
+  onMergeTables?: () => void;
+
+  /**
+   * Callback cuando se hace clic en "Separar Mesas"
+   */
+  onSplitTables?: () => void;
+
+  /**
+   * Callback cuando se selecciona un número de personas
+   */
+  onPeopleCountSelect?: (count: number) => void;
+
+  /**
+   * Callback cuando se hace clic en "Asignar"
+   */
+  onAssignTable?: () => void;
+
+  /**
+   * Callback cuando se hace clic en "Transferir"
+   */
+  onTransferTable?: () => void;
+
+  /**
+   * Callback cuando se hace clic en "Cubiertos"
+   */
+  onSetCutlery?: () => void;
+
+  /**
+   * Callback cuando se cierra el panel de personas
+   */
+  onClosePeoplePanel?: () => void;
+
+  /**
+   * Callback cuando cambia el switch de la mesa
+   */
+  onTableSwitchChange?: (checked: boolean) => void;
+
+  // ===== ESTADOS DE CARGA =====
+
+  /**
+   * Si se está cargando información
+   */
+  isLoading?: boolean;
+
+  /**
+   * Mensaje de error (si existe)
+   */
+  errorMessage?: string;
+
+  // ===== CUSTOMIZACIÓN =====
+
+  /**
+   * Tipo de layout para las mesas:
+   * - 'grid': Grid automático con separación uniforme (por defecto)
+   * - 'free': Posicionamiento libre usando position.x/y de cada mesa
+   */
+  tableLayout?: 'grid' | 'free';
+
+  /**
+   * Clases CSS adicionales para el contenedor
+   */
+  className?: string;
+
+  /**
+   * Información del usuario para el navbar
+   */
+  userInfo?: {
+    avatar: string;
+    name: string;
+    role: string;
+  };
+}

package/src/views/TableLayoutView/icons.tsx

@@ -1,113 +1,113 @@
-import React from 'react';
-
-/**
- * Iconos para TableLayoutView
- * Basados en Heroicons Micro (16x16px)
- */
-
-// Icono Plus (heroicons-micro/plus)
-export const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    aria-hidden="true"
-  >
-    <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>
-);
-
-// Icono Arrows Pointing In (heroicons-micro/arrows-pointing-in)
-export const ArrowsPointingInIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    aria-hidden="true"
-  >
-    <path
-      fillRule="evenodd"
-      d="M2.22 2.22a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-1.5 0V2.5c0-.69.56-1.25 1.25-1.25h4.75a.75.75 0 0 1 0 1.5H4.81l.72.72a.75.75 0 0 1-1.06 1.06l-2-2a.75.75 0 0 1 0-1.06ZM9 2.75a.75.75 0 0 1 .75-.75h4.75C15.19 2 15.75 2.56 15.75 3.25v4.75a.75.75 0 0 1-1.5 0V5.31l-.72.72a.75.75 0 1 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72V8a.75.75 0 0 1-1.5 0V3.5H9.75A.75.75 0 0 1 9 2.75ZM2.75 9a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l.72.72V9.75c0-.41.34-.75.75-.75Zm10.5 0a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-4.75c-.69 0-1.25-.56-1.25-1.25V9.75a.75.75 0 0 1 .75-.75Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-// Icono Arrows Pointing Out (heroicons-micro/arrows-pointing-out)
-export const ArrowsPointingOutIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    aria-hidden="true"
-  >
-    <path
-      fillRule="evenodd"
-      d="M2.75 2a.75.75 0 0 0-.75.75v3.5a.75.75 0 0 0 1.5 0V3.81l2.47 2.47a.75.75 0 1 0 1.06-1.06L4.56 2.75h2.69a.75.75 0 0 0 0-1.5h-4.5ZM9 2.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l2.47 2.47a.75.75 0 1 1-1.06 1.06L10.5 4.56v2.69a.75.75 0 0 1-1.5 0v-4.5ZM2.75 9a.75.75 0 0 1 .75.75v2.69l2.47-2.47a.75.75 0 1 1 1.06 1.06L4.56 13.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 .75-.75Zm10.5 0a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1 0-1.5h2.69l-2.47-2.47a.75.75 0 1 1 1.06-1.06l2.47 2.47V9.75a.75.75 0 0 1 .75-.75Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-// Icono Arrow Right End On Rectangle (heroicons-micro/arrow-right-end-on-rectangle)
-export const ArrowRightEndOnRectangleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    aria-hidden="true"
-  >
-    <path
-      fillRule="evenodd"
-      d="M2 4.75A2.75 2.75 0 0 1 4.75 2h3a2.75 2.75 0 0 1 2.75 2.75v.5a.75.75 0 0 1-1.5 0v-.5c0-.69-.56-1.25-1.25-1.25h-3c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h3c.69 0 1.25-.56 1.25-1.25v-.5a.75.75 0 0 1 1.5 0v.5A2.75 2.75 0 0 1 7.75 14h-3A2.75 2.75 0 0 1 2 11.25v-6.5Zm10.58 2.96-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.78 2.78c.3.29.3.76 0 1.06l-2.78 2.78a.75.75 0 1 1-1.06-1.06l1.72-1.72H7.25a.75.75 0 0 1 0-1.5h5.33Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-// Icono Arrows Right Left (heroicons-micro/arrows-right-left)
-export const ArrowsRightLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    aria-hidden="true"
-  >
-    <path
-      fillRule="evenodd"
-      d="M13.78 10.47a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 1 1-1.06-1.06l.97-.97H5.75a.75.75 0 0 1 0-1.5h5.69l-.97-.97a.75.75 0 0 1 1.06-1.06l2.25 2.25ZM2.22 5.53a.75.75 0 0 1 0-1.06l2.25-2.25a.75.75 0 0 1 1.06 1.06l-.97.97h5.69a.75.75 0 0 1 0 1.5H4.56l.97.97a.75.75 0 1 1-1.06 1.06L2.22 5.53Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-// Icono Rectangle Group (heroicons-micro/rectangle-group)
-export const RectangleGroupIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    aria-hidden="true"
-  >
-    <path d="M2.5 3.5h3v3h-3v-3ZM6.5 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-4ZM2.5 10.5h3v3h-3v-3ZM6.5 9a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-4ZM10.5 3.5h3v3h-3v-3ZM13.5 2h-3a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-.5ZM10.5 10.5h3v3h-3v-3Z" />
-  </svg>
-);
-
-// Icono X Mark (heroicons-micro/x-mark)
-export const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    aria-hidden="true"
-  >
-    <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
-  </svg>
-);
+import React from 'react';
+
+/**
+ * Iconos para TableLayoutView
+ * Basados en Heroicons Micro (16x16px)
+ */
+
+// Icono Plus (heroicons-micro/plus)
+export const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <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>
+);
+
+// Icono Arrows Pointing In (heroicons-micro/arrows-pointing-in)
+export const ArrowsPointingInIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M2.22 2.22a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-1.5 0V2.5c0-.69.56-1.25 1.25-1.25h4.75a.75.75 0 0 1 0 1.5H4.81l.72.72a.75.75 0 0 1-1.06 1.06l-2-2a.75.75 0 0 1 0-1.06ZM9 2.75a.75.75 0 0 1 .75-.75h4.75C15.19 2 15.75 2.56 15.75 3.25v4.75a.75.75 0 0 1-1.5 0V5.31l-.72.72a.75.75 0 1 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72V8a.75.75 0 0 1-1.5 0V3.5H9.75A.75.75 0 0 1 9 2.75ZM2.75 9a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l.72.72V9.75c0-.41.34-.75.75-.75Zm10.5 0a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-4.75c-.69 0-1.25-.56-1.25-1.25V9.75a.75.75 0 0 1 .75-.75Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// Icono Arrows Pointing Out (heroicons-micro/arrows-pointing-out)
+export const ArrowsPointingOutIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M2.75 2a.75.75 0 0 0-.75.75v3.5a.75.75 0 0 0 1.5 0V3.81l2.47 2.47a.75.75 0 1 0 1.06-1.06L4.56 2.75h2.69a.75.75 0 0 0 0-1.5h-4.5ZM9 2.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l2.47 2.47a.75.75 0 1 1-1.06 1.06L10.5 4.56v2.69a.75.75 0 0 1-1.5 0v-4.5ZM2.75 9a.75.75 0 0 1 .75.75v2.69l2.47-2.47a.75.75 0 1 1 1.06 1.06L4.56 13.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 .75-.75Zm10.5 0a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1 0-1.5h2.69l-2.47-2.47a.75.75 0 1 1 1.06-1.06l2.47 2.47V9.75a.75.75 0 0 1 .75-.75Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// Icono Arrow Right End On Rectangle (heroicons-micro/arrow-right-end-on-rectangle)
+export const ArrowRightEndOnRectangleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M2 4.75A2.75 2.75 0 0 1 4.75 2h3a2.75 2.75 0 0 1 2.75 2.75v.5a.75.75 0 0 1-1.5 0v-.5c0-.69-.56-1.25-1.25-1.25h-3c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h3c.69 0 1.25-.56 1.25-1.25v-.5a.75.75 0 0 1 1.5 0v.5A2.75 2.75 0 0 1 7.75 14h-3A2.75 2.75 0 0 1 2 11.25v-6.5Zm10.58 2.96-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.78 2.78c.3.29.3.76 0 1.06l-2.78 2.78a.75.75 0 1 1-1.06-1.06l1.72-1.72H7.25a.75.75 0 0 1 0-1.5h5.33Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// Icono Arrows Right Left (heroicons-micro/arrows-right-left)
+export const ArrowsRightLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M13.78 10.47a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 1 1-1.06-1.06l.97-.97H5.75a.75.75 0 0 1 0-1.5h5.69l-.97-.97a.75.75 0 0 1 1.06-1.06l2.25 2.25ZM2.22 5.53a.75.75 0 0 1 0-1.06l2.25-2.25a.75.75 0 0 1 1.06 1.06l-.97.97h5.69a.75.75 0 0 1 0 1.5H4.56l.97.97a.75.75 0 1 1-1.06 1.06L2.22 5.53Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// Icono Rectangle Group (heroicons-micro/rectangle-group)
+export const RectangleGroupIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M2.5 3.5h3v3h-3v-3ZM6.5 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-4ZM2.5 10.5h3v3h-3v-3ZM6.5 9a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-4ZM10.5 3.5h3v3h-3v-3ZM13.5 2h-3a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-.5ZM10.5 10.5h3v3h-3v-3Z" />
+  </svg>
+);
+
+// Icono X Mark (heroicons-micro/x-mark)
+export const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
+  </svg>
+);

package/src/views/TableLayoutView/index.ts

@@ -1,6 +1,6 @@
-export { TableLayoutView } from './TableLayoutView';
-export type {
-  TableLayoutViewProps,
-  Location,
-  TableItem,
-} from './TableLayoutView.types';
+export { TableLayoutView } from './TableLayoutView';
+export type {
+  TableLayoutViewProps,
+  Location,
+  TableItem,
+} from './TableLayoutView.types';