import React from 'react';
import type { ProductsViewProps } from './ProductsView.types';
/**
 * ProductsView - Vista de selección de productos para sistema POS
 *
 * Vista completa para sistemas POS que permite:
 * - Seleccionar categorías de productos
 * - Ver y agregar productos al pedido
 * - Gestionar items del pedido (cantidad, eliminar)
 * - Ver resumen con subtotal, impuestos y total
 * - Confirmar pedido
 *
 * **Composición:**
 * - Navbar superior con navegación y usuario
 * - Área de contenido con 3 columnas:
 *   - Columna 1: Sidebar de categorías (POSProductButton)
 *   - Columna 2: Grid de productos (POSProductCard)
 *   - Columna 3: Sidebar de pedido (POSProductSidebarItems)
 *
 * **Responsive:**
 * - Mobile (< 768px): Layout vertical adaptativo
 * - Desktop (≥ 768px): Layout de 3 columnas según Figma
 *
 * **Dark Mode:**
 * - Soporte completo con tokens del sistema
 * - Fondos, textos y bordes adaptativos
 *
 * Mejores prácticas implementadas:
 * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
 * - Dark mode con estrategia 'class' (darkMode: 'class')
 * - Tokens de color consistentes con la documentación
 * - Type safety con TypeScript estricto
 * - Responsive design con breakpoints
 * - Composición con componentes del sistema
 *
 * @see docs/colors.md - Sistema de colores
 * @see docs/typography.md - Sistema tipográfico
 * @see docs/spacing.md - Sistema de espaciado
 * @see src/components/POSProductButton - Botón de categoría
 * @see src/components/POSProductCard - Card de producto
 * @see src/components/POSProductSidebarItems - Item de pedido
 *
 * @example
 * ```tsx
 * <ProductsView
 *   tableTitle="Mesa 1"
 *   categories={categories}
 *   products={products}
 *   orderItems={orderItems}
 *   onAddProduct={(id) => console.log('Agregar', id)}
 *   onConfirmOrder={() => console.log('Confirmar')}
 * />
 * ```
 */
export declare const ProductsView: React.FC<ProductsViewProps>;
//# sourceMappingURL=ProductsView.d.ts.map