siesa-ui-kit 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/Dropdown/Dropdown.d.ts.map +1 -1
  2. package/dist/siesa-ui-kit.cjs +122 -122
  3. package/dist/siesa-ui-kit.cjs.map +1 -1
  4. package/dist/siesa-ui-kit.mjs +694 -687
  5. package/dist/siesa-ui-kit.mjs.map +1 -1
  6. package/dist/style.css +1 -1
  7. package/package.json +1 -1
package/dist/siesa-ui-kit.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"siesa-ui-kit.mjs","sources":["../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/components/Textarea/Textarea.tsx","../src/components/Checkbox/Checkbox.tsx","../src/components/Radio/Radio.tsx","../src/components/Switch/Switch.tsx","../src/components/Avatar/Avatar.tsx","../src/components/Divider/Divider.tsx","../src/components/DescriptionList/DescriptionList.tsx","../src/components/Alert/Alert.tsx","../src/components/Badge/Badge.tsx","../src/components/Quantity/Quantity.tsx","../src/components/Dropdown/icons.tsx","../src/components/Dropdown/Dropdown.tsx","../src/components/Notification/Notification.tsx","../src/components/Pagination/icons.tsx","../src/components/Pagination/Pagination.tsx","../src/components/Select/icons.tsx","../src/components/Select/Select.tsx","../src/components/Table/Table.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Navbar/icons.tsx","../src/components/Navbar/Navbar.tsx","../src/components/NavigationBar/NavigationBar.tsx","../src/components/POSConvention/icons.tsx","../src/components/POSConvention/POSConvention.tsx","../src/components/POSLocationButton/icons.tsx","../src/components/POSLocationButton/POSLocationButton.tsx","../src/components/POSNumberButton/POSNumberButton.tsx","../src/components/POSProductButton/POSProductButton.tsx","../src/components/POSProductCard/icons.tsx","../src/components/POSProductCard/POSProductCard.tsx","../src/components/POSProductSidebarItems/icons.tsx","../src/components/POSProductSidebarItems/POSProductSidebarItems.tsx","../src/components/POSTable/POSTable.tsx","../src/context/ThemeContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { ButtonProps, ButtonType } from './Button.types';\n\n/**\n * Componente Button del sistema de diseño Siesa\n *\n * Implementación pixel-perfect basada en Figma (node 4001-17240)\n * con soporte completo para todos los estados, tamaños y variantes.\n *\n * **Variantes (type):**\n * - `default`: Botón primario con fondo sólido (#0e79fd) y borde (#3c9bf6)\n * - Sombra interna para efecto de profundidad\n * - Usar para acciones principales (Guardar, Enviar, Confirmar)\n * - `outline-solid`: Botón secundario con borde (#93d1fd) y shadow-xs\n * - Usar para acciones secundarias (Cancelar, Volver)\n * - `plain`: Botón terciario sin borde visible\n * - Hover overlay sutil\n * - Usar para acciones sutiles (Cerrar, Ver más, Links)\n *\n * **Tamaños (size):**\n * - `xs` (24px): Espacios muy compactos, inline actions. Padding: 8px h, 4px v\n * - `sm` (28px): Barras de herramientas, acciones secundarias. Padding: 8px h, 4px v\n * - `base` (32px): Tamaño estándar para la mayoría de casos. Padding: 10px h, 6px v\n * - `l` (36px): Botones destacados, CTAs. Padding: 12px h, 8px v\n * - `xl` (40px): Heroes, landing pages. Padding: 16px h, 8px v\n *\n * **Estados:**\n * - `default`: Estado normal con colores base\n * - `hover`: Overlay visual sutil (bg-primary-custom-500 para default)\n * - `focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)\n * - `active`: Scale animation (scale-95) para feedback táctil\n * - `disabled`: Opacity 50% con pointer-events-none\n *\n * **Badges de notificación:**\n * - `badge`: Muestra un dot de notificación en la esquina superior derecha\n * - `badgeCount`: Muestra un badge con número (99+ para >99)\n * - `badgeColor`: Color del badge (por defecto: red - #b91c1c)\n *\n * **Especificaciones de Figma:**\n * - Border radius: 6px (rounded-md)\n * - Tipografía: Label Small (14px Bold) para sm/base/l/xl, Label Tiny (12px Bold) para xs\n * - Iconos: 16x16px en todos los tamaños\n * - Gap entre elementos: 8px (xs/sm/base), 12px (l/xl)\n *\n * **Dark Mode:**\n * Los botones invierten colores en dark mode:\n * - Default: fondo celeste claro (#bfe2fe), texto azul (#0e79fd), borde celeste (#93d1fd)\n * - Outline: texto celeste (#93d1fd), borde azul (#0f6ae3)\n * - Plain: texto celeste (#93d1fd), hover overlay blanco 20%\n * - Focus ring adaptativo con offset oscuro\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/shadows.md - Sistema de sombras (shadow-button-inset, shadow-sm)\n * @see docs/typography.md - Sistema tipográfico (Label Small/Tiny)\n * @see docs/spacing.md - Sistema de espaciado\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240 - Diseño Figma\n *\n * @example\n * ```tsx\n * // Botón primario con icono\n * <Button type=\"default\" size=\"base\" leftIcon={<SaveIcon />}>\n * Guardar\n * </Button>\n *\n * // Botón secundario\n * <Button type=\"outline\" size=\"base\">\n * Cancelar\n * </Button>\n *\n * // Botón solo icono para barra de herramientas\n * <Button type=\"plain\" size=\"sm\" iconOnly leftIcon={<CloseIcon />} ariaLabel=\"Cerrar\" />\n *\n * // Botón con badge de notificación (dot)\n * <Button type=\"default\" size=\"base\" badge>\n * Notificaciones\n * </Button>\n *\n * // Botón con badge contador\n * <Button type=\"default\" size=\"base\" badgeCount={5} badgeColor=\"red\">\n * Mensajes\n * </Button>\n * ```\n */\nexport const Button: React.FC<ButtonProps> = ({\n type = 'default',\n size = 'base',\n iconOnly = false,\n leftIcon,\n rightIcon,\n children,\n disabled = false,\n className = '',\n onClick,\n htmlType = 'button',\n fullWidth = false,\n ariaLabel,\n badge = false,\n badgeCount,\n badgeColor = 'red',\n ...rest\n}) => {\n // ===== CLASES DE TAMAÑO =====\n const sizeClasses = {\n xs: iconOnly ? 'h-6 w-6 p-1' : 'h-6 py-1 px-2 gap-2',\n sm: iconOnly ? 'h-7 w-7 p-1.5' : 'h-7 py-1 px-2 gap-2',\n base: iconOnly ? 'h-8 w-8 p-2' : 'h-8 py-1.5 px-2.5 gap-2',\n l: iconOnly ? 'h-9 w-9 p-2.5' : 'h-9 py-2 px-3 gap-3',\n xl: iconOnly ? 'h-10 w-10 p-3' : 'h-10 py-2 px-4 gap-3',\n };\n\n // ===== CLASES DE TAMAÑO DE ICONO =====\n const iconSizeClasses = {\n xs: 'w-4 h-4',\n sm: 'w-4 h-4',\n base: 'w-4 h-4',\n l: 'w-4 h-4',\n xl: 'w-4 h-4',\n };\n\n // ===== CLASES DE TAMAÑO DE TEXTO =====\n // Usando el sistema de tipografía Label del design system (typography.md)\n const textSizeClasses = {\n xs: 'text-xs', // Label Tiny - 12px\n sm: 'text-sm', // Label Small - 14px\n base: 'text-sm', // Label Small - 14px (default para base)\n l: 'text-sm', // Label Small - 14px (corregido según Figma)\n xl: 'text-sm', // Label Small - 14px (corregido según Figma)\n };\n\n // ===== CLASES DE TIPO (Default, Outline, Plain) =====\n // Especificaciones de Figma node 4001-17240\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n // Dark mode: Los botones invierten colores (fondo claro, texto oscuro)\n // - Light: fondo #0e79fd (azul), texto #eff8ff (blanco)\n // - Dark: fondo #bfe2fe (celeste claro), texto #0e79fd (azul)\n const typeClasses: Record<ButtonType, string> = {\n default: `\n bg-primary-custom-600\n text-primary-inverse-content\n border\n border-primary-inverse-border\n shadow-button-inset\n hover:bg-primary-custom-500\n active:scale-95\n transition-all\n duration-150\n dark:bg-dark-bg-inverse\n dark:text-dark-content-inverse\n dark:border-dark-border-inverse\n dark:hover:bg-dark-bg-inverse/90\n `,\n outline: `\n bg-transparent\n text-primary-custom-600\n border\n border-primary-custom-300\n shadow-xs\n hover:bg-primary-custom-100\n active:scale-95\n transition-all\n duration-150\n dark:text-dark-content-custom\n dark:border-dark-border-custom\n dark:hover:bg-dark-bg-custom/20\n `,\n 'outline-solid': `\n bg-transparent\n text-primary-custom-600\n border\n border-primary-custom-300\n shadow-xs\n hover:bg-primary-custom-100\n active:scale-95\n transition-all\n duration-150\n dark:text-dark-content-custom\n dark:border-dark-border-custom\n dark:hover:bg-dark-bg-custom/20\n `,\n plain: `\n bg-transparent\n text-primary-custom-600\n border\n border-transparent\n hover:bg-hover-overlay\n active:scale-95\n transition-all\n duration-150\n dark:text-dark-content-custom\n dark:hover:bg-hover-overlay-dark\n `,\n };\n\n // ===== CLASES BASE =====\n // Especificaciones de Figma: Focus ring = 4px spread primary-custom-400 + 2px offset primary-custom-100\n // Dark mode: Focus ring adaptativo con offset oscuro\n const baseClasses = `\n inline-flex\n items-center\n justify-center\n rounded-md\n font-bold\n whitespace-nowrap\n focus:outline-hidden\n focus:ring-4\n focus:ring-primary-custom-400\n focus:ring-offset-2\n focus:ring-offset-primary-custom-100\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n disabled:opacity-50\n disabled:cursor-not-allowed\n disabled:pointer-events-none\n `;\n\n // ===== CLASE FULL WIDTH =====\n const widthClass = fullWidth ? 'w-full' : '';\n\n // ===== COMBINAR TODAS LAS CLASES =====\n const buttonClasses = [\n baseClasses,\n sizeClasses[size],\n typeClasses[type],\n widthClass,\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== RENDERIZAR ICONO =====\n const renderIcon = (icon: React.ReactNode) => {\n if (!icon) return null;\n return (\n <span className={`inline-flex items-center justify-center ${iconSizeClasses[size]}`}>\n {icon}\n </span>\n );\n };\n\n // ===== RENDERIZAR CONTENIDO =====\n const renderContent = () => {\n // Si es iconOnly, solo mostrar leftIcon\n if (iconOnly) {\n return renderIcon(leftIcon);\n }\n\n // Si tiene texto y/o iconos\n return (\n <>\n {leftIcon && renderIcon(leftIcon)}\n {children && <span className={textSizeClasses[size]}>{children}</span>}\n {rightIcon && renderIcon(rightIcon)}\n </>\n );\n };\n\n // ===== MAPA DE COLORES DE BADGE =====\n // Basado en el componente Badge existente\n const badgeColorClasses: Record<string, { bg: string; text: string }> = {\n zinc: { bg: 'bg-zinc-600', text: 'text-white' },\n red: { bg: 'bg-red-700', text: 'text-white' },\n orange: { bg: 'bg-orange-700', text: 'text-white' },\n amber: { bg: 'bg-amber-700', text: 'text-white' },\n yellow: { bg: 'bg-yellow-700', text: 'text-white' },\n lime: { bg: 'bg-lime-700', text: 'text-white' },\n green: { bg: 'bg-green-700', text: 'text-white' },\n emerald: { bg: 'bg-emerald-700', text: 'text-white' },\n teal: { bg: 'bg-teal-700', text: 'text-white' },\n cyan: { bg: 'bg-cyan-700', text: 'text-white' },\n sky: { bg: 'bg-sky-700', text: 'text-white' },\n blue: { bg: 'bg-blue-700', text: 'text-white' },\n indigo: { bg: 'bg-indigo-700', text: 'text-white' },\n violet: { bg: 'bg-violet-700', text: 'text-white' },\n purple: { bg: 'bg-purple-700', text: 'text-white' },\n fuchsia: { bg: 'bg-fuchsia-700', text: 'text-white' },\n pink: { bg: 'bg-pink-700', text: 'text-white' },\n rose: { bg: 'bg-rose-700', text: 'text-white' },\n primary: { bg: 'bg-primary-custom-600', text: 'text-white' },\n secondary: { bg: 'bg-zinc-600', text: 'text-white' },\n tertiary: { bg: 'bg-zinc-600', text: 'text-white' },\n };\n\n const badgeColors = badgeColorClasses[badgeColor] || badgeColorClasses.red;\n\n // ===== RENDERIZAR BADGE =====\n const renderBadge = () => {\n // Si no hay badge ni badgeCount, no renderizar nada\n if (!badge && badgeCount === undefined) return null;\n\n // Si hay badgeCount, renderizar badge con número\n if (badgeCount !== undefined) {\n return (\n <span\n className={`\n absolute\n -top-1\n -right-1\n flex\n items-center\n justify-center\n min-w-[16px]\n h-4\n px-1\n rounded-full\n text-[10px]\n font-bold\n leading-none\n ${badgeColors.bg}\n ${badgeColors.text}\n pointer-events-none\n `.trim().replace(/\\s+/g, ' ')}\n aria-label={`${badgeCount} notificaciones`}\n >\n {badgeCount > 99 ? '99+' : badgeCount}\n </span>\n );\n }\n\n // Si solo hay badge (sin número), renderizar dot\n return (\n <span\n className={`\n absolute\n -top-1\n -right-1\n w-2\n h-2\n rounded-full\n ${badgeColors.bg}\n pointer-events-none\n `.trim().replace(/\\s+/g, ' ')}\n aria-label=\"Notificación\"\n />\n );\n };\n\n return (\n <button\n type={htmlType}\n className={`${buttonClasses} ${(badge || badgeCount !== undefined) ? 'relative' : ''}`}\n disabled={disabled}\n onClick={onClick}\n aria-label={ariaLabel}\n {...rest}\n >\n {renderContent()}\n {renderBadge()}\n </button>\n );\n};\n","import React, { forwardRef, cloneElement } from 'react';\nimport type { InputProps } from './Input.types';\n\n/**\n * Input - Componente de campo de entrada del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Tokens de color consistentes con la documentación\n * - Sombra base para inputs con focus\n * - Estados hover, focus, disabled y error completos\n * - Typography: Paragraph Regular para texto, Label Bold para labels\n *\n * Campo de entrada de texto con soporte para:\n * - Estados: default, hover, focus, filled, disabled\n * - Validación con mensajes de error\n * - Iconos izquierdo y derecho\n * - Label y helper text\n * - Dark mode completo\n * - Accesibilidad completa\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/shadows.md - Sistema de sombras\n * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Input\n * label=\"Email\"\n * placeholder=\"tu@email.com\"\n * leftIcon={<EnvelopeIcon />}\n * helperText=\"Ingresa tu correo electrónico\"\n * />\n * ```\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n label,\n labelSecondary,\n helperText,\n error = false,\n errorMessage,\n leftIcon,\n rightIcon,\n fullWidth = false,\n className = '',\n disabled = false,\n id,\n ...props\n },\n ref\n ) => {\n // Generar ID único si no se proporciona\n const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;\n\n // ===== CLASES BASE DEL INPUT =====\n // Usando el sistema tipográfico Paragraph Regular (14px = text-sm)\n // Border radius rounded-md (6px) consistente con Button\n const baseInputClasses = `\n w-full\n px-3\n py-1.5\n text-sm\n leading-6\n font-normal\n text-content-primary\n bg-bg-primary\n border\n border-border-primary\n rounded-md\n outline-hidden\n transition-all\n duration-150\n placeholder:text-content-tertiary\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n dark:text-dark-content-primary\n dark:placeholder:text-dark-content-tertiary\n `;\n\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n // Focus rings adaptativos siguiendo el patrón de Button\n const interactiveClasses = !disabled\n ? `\n hover:border-primary-custom-600\n focus:border-primary-custom-600\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:hover:border-dark-border-custom\n dark:focus:border-dark-border-custom\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n `\n : `\n opacity-50\n cursor-not-allowed\n bg-bg-secondary\n dark:bg-dark-bg-secondary\n `;\n\n // ===== CLASES PARA ESTADO DE ERROR =====\n // Los colores de error son los mismos en light y dark mode\n const errorClasses = error\n ? `\n border-error-border!\n focus:ring-error-border/30!\n focus:ring-offset-2!\n dark:border-error-border!\n dark:focus:ring-error-border/30!\n dark:focus:ring-offset-dark-bg-primary!\n `\n : '';\n\n // ===== CLASES DEL CONTENEDOR =====\n const containerClasses = fullWidth ? 'w-full' : 'w-[265px]';\n\n // ===== RENDERIZAR ICONOS =====\n // Clonar iconos con estilos apropiados y dark mode completo\n const renderIcon = (icon: React.ReactElement | undefined) => {\n if (!icon) return null;\n const existingClassName = (icon.props as any).className || '';\n return cloneElement(icon as React.ReactElement<any>, {\n className: `w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary ${existingClassName}`,\n });\n };\n\n return (\n <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>\n {/* Label */}\n {label && (\n <label\n htmlFor={inputId}\n className=\"flex items-center w-full font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary\"\n >\n <span className=\"flex-1\">{label}</span>\n {labelSecondary && (\n <span className=\"text-xs leading-4 text-primary-custom-600 dark:text-primary-custom-600\">\n {labelSecondary}\n </span>\n )}\n </label>\n )}\n\n {/* Input Container */}\n <div className=\"relative flex items-center\">\n {/* Left Icon */}\n {leftIcon && (\n <div className=\"absolute left-3 pointer-events-none\">\n {renderIcon(leftIcon)}\n </div>\n )}\n\n {/* Input Field */}\n <input\n ref={ref}\n id={inputId}\n disabled={disabled}\n className={`\n ${baseInputClasses}\n ${interactiveClasses}\n ${errorClasses}\n ${leftIcon ? 'pl-9' : ''}\n ${rightIcon ? 'pr-9' : ''}\n `.trim().replace(/\\s+/g, ' ')}\n {...props}\n />\n\n {/* Right Icon */}\n {rightIcon && (\n <div className=\"absolute right-3 pointer-events-none\">\n {renderIcon(rightIcon)}\n </div>\n )}\n </div>\n\n {/* Helper Text or Error Message */}\n {(helperText || errorMessage) && (\n <p\n className={`\n text-xs\n leading-5\n ${\n error\n ? 'text-error-content dark:text-error-content'\n : 'text-content-tertiary dark:text-dark-content-tertiary'\n }\n `.trim().replace(/\\s+/g, ' ')}\n >\n {error && errorMessage ? errorMessage : helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = 'Input';\n","import { forwardRef } from 'react';\nimport type { TextareaProps } from './Textarea.types';\n\n/**\n * Textarea - Componente de área de texto del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Tokens de color consistentes con la documentación\n * - Estados hover, focus, disabled y error completos\n * - Typography: Paragraph Base (16px) para texto\n *\n * Campo de entrada de texto multi-línea con soporte para:\n * - Estados: default, hover, focus, filled, disabled\n * - Validación con mensajes de error\n * - Label, description y helper text\n * - Resize vertical, horizontal, both o none\n * - Dark mode completo\n * - Accesibilidad completa\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/shadows.md - Sistema de sombras\n * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Textarea\n * label=\"About\"\n * description=\"Tell us about yourself\"\n * placeholder=\"Write a few sentences...\"\n * helperText=\"Minimum 50 characters\"\n * />\n * ```\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n (\n {\n label,\n description,\n helperText,\n error = false,\n errorMessage,\n fullWidth = false,\n resize = 'vertical',\n className = '',\n disabled = false,\n id,\n rows = 4,\n ...props\n },\n ref\n ) => {\n // Generar ID único si no se proporciona\n const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;\n\n // ===== CLASES BASE DEL TEXTAREA =====\n // Usando el sistema tipográfico Paragraph Base (16px = text-base)\n // Border radius rounded-lg (8px) según especificaciones de Figma\n // Padding: px-3 (12px) izquierda, pr-1.5 (6px) derecha para el indicador de resize\n const baseTextareaClasses = `\n w-full\n px-3\n pr-1.5\n py-1.5\n text-base\n leading-6\n font-normal\n bg-bg-primary\n border\n border-border-primary\n rounded-lg\n outline-hidden\n transition-all\n duration-150\n placeholder:text-content-tertiary\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n dark:text-dark-content-primary\n dark:placeholder:text-dark-content-tertiary\n `;\n\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n // Hover: borde más opaco (zinc-400) según especificaciones de Figma\n // Focus: solo border-2 sin ring, según especificaciones de Figma\n const interactiveClasses = !disabled\n ? `\n hover:border-zinc-400\n focus:border-2\n focus:border-primary-custom-600\n dark:hover:border-zinc-500\n dark:focus:border-2\n dark:focus:border-dark-border-custom\n `\n : `\n opacity-50\n cursor-not-allowed\n bg-bg-secondary\n dark:bg-dark-bg-secondary\n `;\n\n // ===== CLASES PARA ESTADO DE ERROR =====\n // Los colores de error son los mismos en light y dark mode\n // Focus en error: solo border-2 sin ring, según especificaciones de Figma\n const errorClasses = error\n ? `\n border-error-border!\n focus:border-2!\n focus:border-error-border!\n dark:border-error-border!\n dark:focus:border-2!\n dark:focus:border-error-border!\n `\n : '';\n\n // ===== CLASES DE RESIZE =====\n const resizeClasses =\n resize === 'none'\n ? 'resize-none'\n : resize === 'vertical'\n ? 'resize-y'\n : resize === 'horizontal'\n ? 'resize-x'\n : 'resize';\n\n // ===== CLASES DEL CONTENEDOR =====\n // Ancho por defecto: 312px (según especificaciones de Figma)\n const containerClasses = fullWidth ? 'w-full' : 'w-[312px]';\n\n return (\n <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>\n {/* Label and Description */}\n {(label || description) && (\n <div className=\"flex flex-col gap-1 w-full\">\n {label && (\n <label\n htmlFor={textareaId}\n className=\"font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary\"\n >\n {label}\n </label>\n )}\n {description && (\n <p className=\"text-sm leading-5 text-content-secondary dark:text-dark-content-secondary\">\n {description}\n </p>\n )}\n </div>\n )}\n\n {/* Textarea Field */}\n <textarea\n ref={ref}\n id={textareaId}\n disabled={disabled}\n rows={rows}\n className={`\n ${baseTextareaClasses}\n ${interactiveClasses}\n ${errorClasses}\n ${resizeClasses}\n `.trim().replace(/\\s+/g, ' ')}\n {...props}\n />\n\n {/* Helper Text or Error Message */}\n {(helperText || errorMessage) && (\n <p\n className={`\n text-sm\n leading-5\n text-content-tertiary\n dark:text-dark-content-tertiary\n `.trim().replace(/\\s+/g, ' ')}\n >\n {error && errorMessage ? errorMessage : helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nTextarea.displayName = 'Textarea';\n","import { forwardRef, useEffect, useRef } from 'react';\nimport type { CheckboxProps } from './Checkbox.types';\n\n/**\n * Checkbox del sistema de diseño Siesa\n *\n * Componente de checkbox con soporte completo para estados interactivos,\n * indeterminate, y dark mode pixel-perfect según especificaciones de Figma.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Sombra button-inset para estado checked\n * - Type safety con TypeScript estricto\n * - Accesibilidad con input nativo y ARIA\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label/Paragraph)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Checkbox\n * label=\"Show on Events Page\"\n * description=\"Make this event visible on your profile\"\n * checked={true}\n * onChange={(e) => console.log(e.target.checked)}\n * />\n * ```\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n label,\n description,\n checked = false,\n indeterminate = false,\n disabled = false,\n className = '',\n id,\n onChange,\n ...props\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const combinedRef = (ref as any) || inputRef;\n\n // Generar ID único si no se proporciona\n const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;\n\n // Manejar el estado indeterminate\n useEffect(() => {\n if (combinedRef.current) {\n combinedRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate, combinedRef]);\n\n // ===== CLASES BASE DEL CHECKBOX =====\n const baseCheckboxClasses = `\n w-4\n h-4\n rounded\n border\n border-border-primary\n bg-bg-primary\n transition-all\n duration-150\n flex\n items-center\n justify-center\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n `;\n\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\n const interactiveClasses = !disabled\n ? (checked || indeterminate)\n ? `\n peer-hover:border-[#50a5f7]\n peer-focus:ring-2\n peer-focus:ring-primary-custom-400/20\n peer-focus:border-primary-custom-600\n dark:peer-hover:border-[#50a5f7]\n dark:peer-focus:border-dark-border-custom\n dark:peer-focus:ring-dark-border-custom/20\n `\n : `\n peer-hover:border-[#b6b6b9]\n peer-focus:ring-2\n peer-focus:ring-primary-custom-400/20\n peer-focus:border-primary-custom-600\n dark:peer-hover:border-[#b6b6b9]\n dark:peer-focus:border-dark-border-custom\n dark:peer-focus:ring-dark-border-custom/20\n `\n : `\n opacity-50\n cursor-not-allowed\n `;\n\n // ===== CLASES PARA ESTADO CHECKED/INDETERMINATE =====\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n const checkedClasses = checked || indeterminate\n ? `\n bg-primary-custom-600!\n border-primary-custom-500!\n shadow-button-inset\n dark:bg-dark-bg-inverse!\n dark:border-dark-bg-inverse!\n `\n : '';\n\n // ===== COMBINAR TODAS LAS CLASES DEL CHECKBOX =====\n const checkboxClasses = [\n baseCheckboxClasses,\n interactiveClasses,\n checkedClasses,\n disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div className={`inline-flex gap-3 items-start ${className}`}>\n {/* Checkbox Input Container */}\n <div className=\"flex items-center justify-center h-5 w-4 shrink-0\">\n {/* Native Input (hidden but accessible) */}\n <input\n ref={combinedRef}\n type=\"checkbox\"\n id={checkboxId}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n className=\"peer sr-only\"\n {...props}\n />\n\n {/* Custom Checkbox Visual */}\n <label htmlFor={checkboxId} className={checkboxClasses}>\n {/* Check Icon - Usar primary-inverse-content para consistencia */}\n {checked && !indeterminate && (\n <svg\n className=\"w-3 h-3 text-primary-inverse-content pointer-events-none\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 3L4.5 8.5L2 6\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )}\n\n {/* Indeterminate Icon (minus) - Usar primary-inverse-content */}\n {indeterminate && (\n <svg\n className=\"w-3 h-3 text-primary-inverse-content pointer-events-none\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2 6H10\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </svg>\n )}\n </label>\n </div>\n\n {/* Label and Description */}\n {(label || description) && (\n <label\n htmlFor={checkboxId}\n className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\n }`}\n >\n {/* Label - Label/Small (14px, Bold) */}\n {label && (\n <span className=\"font-bold text-content-primary dark:text-dark-content-primary\">\n {label}\n </span>\n )}\n {/* Description - Paragraph/Small (14px, Regular) */}\n {description && (\n <span className=\"font-normal text-content-secondary dark:text-content-secondary\">\n {description}\n </span>\n )}\n </label>\n )}\n </div>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n","import { forwardRef } from 'react';\nimport type { RadioProps } from './Radio.types';\n\n/**\n * Radio - Componente de radio button del sistema de diseño Siesa\n *\n * Campo de selección única diseñado para cumplir con las especificaciones\n * de Figma con soporte completo para dark mode y accesibilidad.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con keyboard navigation y ARIA\n * - Inner shadow en estado checked según especificaciones Figma\n *\n * Estados soportados:\n * - Default, Hover, Focus, Disabled\n * - Checked / Unchecked\n * - Label y description opcionales\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Radio simple\n * <Radio\n * label=\"Allow tickets to be resold\"\n * description=\"Customers can resell or transfer their tickets\"\n * value=\"resell\"\n * name=\"ticketOptions\"\n * checked={true}\n * onChange={(e) => console.log(e.target.checked)}\n * />\n *\n * // Radio group\n * <div>\n * <Radio label=\"Option 1\" name=\"group\" value=\"1\" checked={selected === \"1\"} onChange={handleChange} />\n * <Radio label=\"Option 2\" name=\"group\" value=\"2\" checked={selected === \"2\"} onChange={handleChange} />\n * </div>\n * ```\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n label,\n description,\n checked = false,\n disabled = false,\n className = '',\n id,\n onChange,\n value,\n name,\n ...props\n },\n ref\n ) => {\n // Generar ID único si no se proporciona\n const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;\n\n // ===== CLASES BASE DEL RADIO BUTTON =====\n const baseRadioClasses = `\n w-4\n h-4\n rounded-full\n border\n border-border-primary\n bg-bg-primary\n transition-all\n duration-150\n flex\n items-center\n justify-center\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n `;\n\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\n const interactiveClasses = !disabled\n ? `\n peer-hover:border-primary-custom-600\n peer-focus:ring-2\n peer-focus:ring-primary-custom-400\n peer-focus:border-primary-custom-600\n dark:peer-hover:border-dark-border-custom\n dark:peer-focus:ring-dark-border-custom\n dark:peer-focus:border-dark-border-custom\n `\n : `\n opacity-50\n cursor-not-allowed\n `;\n\n // ===== CLASES PARA CHECKED STATE =====\n // Según Figma: bg #0e79fd, border #3c9bf6, inner shadow\n const checkedClasses = checked\n ? `\n bg-primary-custom-600!\n border-primary-inverse-border!\n shadow-button-inset\n dark:bg-dark-bg-inverse!\n dark:border-dark-bg-inverse!\n `\n : '';\n\n return (\n <div className={`flex gap-3 items-start ${className}`}>\n {/* Radio Input Container */}\n <div className=\"flex items-center justify-center h-5 w-4 shrink-0\">\n {/* Native Input (hidden but accessible) */}\n <input\n ref={ref}\n type=\"radio\"\n id={radioId}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n value={value}\n name={name}\n className=\"peer sr-only\"\n {...props}\n />\n\n {/* Custom Radio Visual */}\n <label\n htmlFor={radioId}\n className={`\n ${baseRadioClasses}\n ${interactiveClasses}\n ${checkedClasses}\n ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}\n `.trim().replace(/\\s+/g, ' ')}\n >\n {/* Inner Circle (checked state) - 6px white dot según Figma */}\n {checked && (\n <div className=\"w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse\" />\n )}\n </label>\n </div>\n\n {/* Label and Description */}\n {(label || description) && (\n <label\n htmlFor={radioId}\n className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\n }`}\n >\n {label && (\n <span className=\"font-bold text-content-primary dark:text-dark-content-primary\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"font-normal text-content-secondary dark:text-content-secondary\">\n {description}\n </span>\n )}\n </label>\n )}\n </div>\n );\n }\n);\n\nRadio.displayName = 'Radio';\n","import { forwardRef } from 'react';\nimport type { SwitchProps } from './Switch.types';\n\n/**\n * Switch - Componente de switch del sistema de diseño Siesa\n *\n * Campo de activación/desactivación con soporte para:\n * - Estados: default, hover, focus, disabled\n * - On, off\n * - Label y description opcionales\n * - Posición del label: leading (izquierda) o trailing (derecha)\n * - Animación suave de transición\n * - Dark mode completo\n * - Accesibilidad completa\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Focus ring con shadow especial según Figma\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Label a la izquierda (default)\n * <Switch\n * label=\"Permitir inserción\"\n * description=\"Permite que otros inserten los detalles de tu evento.\"\n * checked={true}\n * onChange={(e) => console.log(e.target.checked)}\n * />\n *\n * // Label a la derecha\n * <Switch\n * label=\"Activar notificaciones\"\n * labelPosition=\"trailing\"\n * checked={false}\n * onChange={(e) => console.log(e.target.checked)}\n * />\n * ```\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n (\n {\n label,\n description,\n labelPosition = 'leading',\n checked = false,\n disabled = false,\n className = '',\n id,\n onChange,\n ariaLabel,\n ...props\n },\n ref\n ) => {\n // Generar ID único si no se proporciona\n const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;\n\n // ===== CLASES BASE DEL TRACK =====\n const baseTrackClasses = `\n w-8\n h-5\n rounded-xl\n border\n overflow-hidden\n relative\n transition-all\n duration-200\n `;\n\n // ===== CLASES DE ESTADO DEL TRACK =====\n const getTrackStateClasses = () => {\n if (disabled) {\n return checked\n ? `\n bg-primary-custom-600\n border-primary-inverse-border\n opacity-50\n cursor-not-allowed\n dark:bg-primary-custom-600\n dark:border-primary-inverse-border\n `\n : `\n bg-[#fafafa]\n border-border-primary\n opacity-50\n cursor-not-allowed\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n `;\n }\n\n return checked\n ? `\n bg-primary-custom-600\n border-primary-inverse-border\n cursor-pointer\n peer-hover:border-[#307cc5]\n peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n dark:bg-primary-custom-600\n dark:border-primary-inverse-border\n dark:peer-hover:border-[#307cc5]\n dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n `\n : `\n bg-[#fafafa]\n border-border-primary\n cursor-pointer\n peer-hover:border-[#b6b6b9]\n peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n dark:peer-hover:border-[#b6b6b9]\n dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n `;\n };\n\n // ===== CLASES DEL BOTÓN (CÍRCULO) =====\n const getButtonClasses = () => {\n const baseButtonClasses = `\n absolute\n w-4\n h-4\n bg-white\n rounded-[10px]\n border\n top-1/2\n -translate-y-1/2\n transition-all\n duration-200\n `;\n\n // Posición: OFF = left-px (1px), ON = left-[13px]\n const positionClass = checked ? 'left-[13px]' : 'left-px';\n\n if (disabled) {\n const borderClass = checked\n ? 'border-primary-inverse-border dark:border-primary-inverse-border'\n : 'border-border-primary dark:border-dark-border-primary';\n return `${baseButtonClasses} ${positionClass} ${borderClass}`;\n }\n\n const borderClass = checked\n ? `\n border-primary-inverse-border\n peer-hover:border-[#307cc5]\n dark:border-primary-inverse-border\n dark:peer-hover:border-[#307cc5]\n `\n : `\n border-border-primary\n peer-hover:border-[#b6b6b9]\n dark:border-dark-border-primary\n dark:peer-hover:border-[#b6b6b9]\n `;\n\n return `${baseButtonClasses} ${positionClass} ${borderClass}`;\n };\n\n // ===== COMBINAR CLASES =====\n const trackClasses = [\n baseTrackClasses,\n getTrackStateClasses(),\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n const buttonClasses = getButtonClasses()\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== COMPONENTES REUTILIZABLES =====\n const LabelContent = (label || description) ? (\n <label\n htmlFor={switchId}\n className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\n }`}\n >\n {label && (\n <span className=\"font-bold text-content-primary dark:text-dark-content-primary\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"font-normal text-content-secondary dark:text-content-secondary\">\n {description}\n </span>\n )}\n </label>\n ) : null;\n\n const SwitchInput = (\n <div className=\"flex items-center justify-center shrink-0\">\n {/* Native Input (hidden but accessible) */}\n <input\n ref={ref}\n type=\"checkbox\"\n id={switchId}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n className=\"peer sr-only\"\n aria-label={ariaLabel || label}\n {...props}\n />\n\n {/* Custom Switch Visual */}\n <label\n htmlFor={switchId}\n className={trackClasses}\n aria-hidden=\"true\"\n >\n {/* Button (sliding circle) */}\n <div className={buttonClasses} />\n </label>\n </div>\n );\n\n return (\n <div className={`flex gap-2 items-center w-[344px] ${className}`}>\n {labelPosition === 'leading' ? (\n <>\n {LabelContent}\n {SwitchInput}\n </>\n ) : (\n <>\n {SwitchInput}\n {LabelContent}\n </>\n )}\n </div>\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n","import { forwardRef } from 'react';\nimport type { AvatarProps } from './Avatar.types';\n\n/**\n * Avatar - Componente de avatar del sistema de diseño Siesa\n *\n * Componente para mostrar imágenes de usuario o iniciales con soporte para:\n * - Tamaños: 4 (20px), 6 (24px), 8 (32px), 10 (40px)\n * - Tipos: circular (completamente redondo) y rounded (esquinas redondeadas)\n * - Imagen o iniciales\n * - Dark mode completo\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Tipografía adaptativa según tamaño\n * - Type safety con TypeScript estricto\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Con imagen\n * <Avatar\n * src=\"/path/to/image.jpg\"\n * alt=\"John Doe\"\n * size=\"10\"\n * type=\"circular\"\n * />\n *\n * // Con iniciales\n * <Avatar\n * initials=\"JD\"\n * size=\"10\"\n * type=\"circular\"\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n size = '10',\n type = 'circular',\n src,\n alt = '',\n initials,\n className = '',\n ...props\n },\n ref\n ) => {\n // ===== CLASES DE TAMAÑO =====\n // Tamaño del contenedor del avatar\n const containerSizeClasses = {\n '4': 'w-5 h-5',\n '6': 'w-6 h-6',\n '8': 'w-8 h-8',\n '10': 'w-10 h-10',\n };\n\n // ===== CLASES DE TEXTO =====\n // Tamaño de texto para iniciales (basado en sistema tipográfico)\n const textSizeClasses = {\n '4': 'text-xs', // 12px - Paragraph Tiny\n '6': 'text-xs', // 12px - Paragraph Tiny\n '8': 'text-sm', // 14px - Paragraph Small\n '10': 'text-base', // 16px - Paragraph Base\n };\n\n // ===== CLASES DE TIPO (Forma) =====\n const typeClasses = {\n circular: 'rounded-full',\n rounded: 'rounded-md',\n };\n\n // ===== CLASES BASE =====\n const baseClasses = `\n relative\n inline-flex\n items-center\n justify-center\n overflow-hidden\n ${containerSizeClasses[size]}\n ${typeClasses[type]}\n `;\n\n // Si hay imagen, mostrarla\n if (src) {\n return (\n <div\n ref={ref}\n className={`${baseClasses} ${className}`.trim().replace(/\\s+/g, ' ')}\n >\n <img\n src={src}\n alt={alt}\n className=\"w-full h-full object-cover\"\n {...(props as any)}\n />\n </div>\n );\n }\n\n // Si hay iniciales, mostrarlas\n if (initials) {\n return (\n <div\n ref={ref}\n className={`\n ${baseClasses}\n ${textSizeClasses[size]}\n bg-content-primary\n text-white\n font-normal\n dark:bg-dark-bg-inverse\n dark:text-dark-content-inverse\n ${className}\n `.trim().replace(/\\s+/g, ' ')}\n >\n <span className=\"leading-none\">{initials}</span>\n </div>\n );\n }\n\n // Fallback: avatar vacío\n return (\n <div\n ref={ref}\n className={`\n ${baseClasses}\n bg-background-secondary\n dark:bg-dark-bg-primary\n ${className}\n `.trim().replace(/\\s+/g, ' ')}\n />\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n","import { forwardRef } from 'react';\nimport type { DividerProps } from './Divider.types';\n\n/**\n * Divider del sistema de diseño Siesa\n *\n * Línea horizontal de 1px para separar contenido visual o semánticamente.\n * Implementa dos variantes con soporte completo de dark mode.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Componente semántico usando elemento <hr>\n *\n * @see docs/colors.md - Sistema de colores (border-primary, border-secondary)\n * @see docs/spacing.md - Sistema de espaciado (altura de 1px)\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4096-8445 - Especificaciones Figma\n *\n * @example\n * ```tsx\n * // Default divider (más visible)\n * <Divider />\n * <Divider type=\"default\" />\n *\n * // Soft divider (más sutil)\n * <Divider type=\"soft\" />\n *\n * // Con clases personalizadas\n * <Divider className=\"my-6\" />\n * ```\n */\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(\n (\n {\n type = 'default',\n className = '',\n ...props\n },\n ref\n ) => {\n // ===== CLASES DE TIPO =====\n // Orden de modificadores: {dark}:{utility}\n const typeClasses = {\n // Default: Línea más visible para separaciones claras\n // Light: border-primary (#e4e4e7)\n // Dark: dark-border-primary (#71717a)\n default: 'bg-border-primary dark:bg-dark-border-primary',\n\n // Soft: Línea más sutil para separaciones suaves\n // Light: border-secondary (#f4f4f5 - muy claro)\n // Dark: gray-700 (#374151 - gris medio-oscuro, más sutil que dark-border-primary)\n soft: 'bg-border-secondary dark:bg-gray-700',\n };\n\n // ===== CLASES BASE =====\n const baseClasses = 'w-full h-px border-0';\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [\n baseClasses,\n typeClasses[type],\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <hr\n ref={ref}\n className={finalClasses}\n {...props}\n />\n );\n }\n);\n\nDivider.displayName = 'Divider';\n","import { forwardRef } from 'react';\nimport type { DescriptionListProps } from './DescriptionList.types';\n\n/**\n * DescriptionList del sistema de diseño Siesa\n *\n * Componente para mostrar información estructurada en formato clave-valor (term/details).\n * Layout de dos columnas con separador inferior entre items.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Layout flexible y responsive\n * - Tipografía del sistema (Paragraph/Small - 14px)\n *\n * @see docs/colors.md - Sistema de colores (content-primary, content-secondary)\n * @see docs/typography.md - Sistema tipográfico (Paragraph/Small)\n * @see docs/spacing.md - Sistema de espaciado (padding, gaps)\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4103-8449 - Especificaciones Figma\n *\n * @example\n * ```tsx\n * // Item básico\n * <DescriptionList\n * term=\"Customer\"\n * details=\"Jhonatan Diaz\"\n * />\n *\n * // Lista completa\n * <div>\n * <DescriptionList term=\"Event\" details=\"Bear Hug: Live in Concert\" />\n * <DescriptionList term=\"Amount\" details=\"$120,000 COP\" />\n * <DescriptionList term=\"Fee\" details=\"$20,000 COP\" />\n * </div>\n * ```\n */\nexport const DescriptionList = forwardRef<HTMLDivElement, DescriptionListProps>(\n (\n {\n term,\n details,\n className = '',\n ...props\n },\n ref\n ) => {\n // ===== CLASES BASE =====\n const baseClasses = `\n flex\n flex-wrap\n gap-1\n items-start\n py-2.5\n border-b\n border-border-secondary\n dark:border-gray-700\n `;\n\n // ===== CLASES DE COLUMNA =====\n // Cada columna ocupa el 50% del espacio disponible (flex-1)\n // con un ancho mínimo de 180px para mantener legibilidad\n const columnClasses = 'flex-1 min-w-[180px]';\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [baseClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div ref={ref} className={finalClasses} {...props}>\n {/* Term Column (izquierda) */}\n {/* Light: content-secondary (#a1a1aa) */}\n {/* Dark: gray-400 (#9ca3af - gris medio claro para mantener contraste) */}\n <div className={columnClasses}>\n <p className=\"text-sm leading-5 text-content-secondary dark:text-gray-400 font-normal\">\n {term}\n </p>\n </div>\n\n {/* Details Column (derecha) */}\n {/* Light: content-primary (#18181b) */}\n {/* Dark: dark-content-primary (#ffffff) */}\n <div className={columnClasses}>\n <p className=\"text-sm leading-5 text-content-primary dark:text-dark-content-primary font-normal\">\n {details}\n </p>\n </div>\n </div>\n );\n }\n);\n\nDescriptionList.displayName = 'DescriptionList';\n","import { forwardRef } from 'react';\nimport type { AlertProps } from './Alert.types';\nimport { Button } from '../Button/Button';\n\n/**\n * Alert - Componente de alerta/diálogo del sistema de diseño Siesa\n *\n * Componente modal para confirmaciones con soporte para:\n * - Título y descripción\n * - Contenido personalizado (children)\n * - Botones de acción personalizados o por defecto\n * - Dark mode\n *\n * @example\n * ```tsx\n * <Alert\n * title=\"Are you sure you want to refund this payment?\"\n * description=\"The refund will be reflected in 2 to 3 business days.\"\n * onCancel={() => console.log('Cancelled')}\n * onConfirm={() => console.log('Confirmed')}\n * confirmText=\"Refund\"\n * />\n * ```\n */\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(\n (\n {\n title,\n description,\n children,\n actions,\n onCancel,\n onConfirm,\n cancelText = 'Cancelar',\n confirmText = 'Confirmar',\n className = '',\n ...props\n },\n ref\n ) => {\n // Si se proveen actions personalizadas, usarlas. Si no, usar botones por defecto\n const actionButtons = actions || (\n <>\n {onCancel && (\n <Button type=\"plain\" size=\"base\" onClick={onCancel}>\n {cancelText}\n </Button>\n )}\n {onConfirm && (\n <Button type=\"default\" size=\"base\" onClick={onConfirm}>\n {confirmText}\n </Button>\n )}\n </>\n );\n\n return (\n <div\n ref={ref}\n className={`\n w-[512px]\n bg-white\n dark:bg-dark-bg-primary\n border\n border-border-primary\n dark:border-dark-border-primary\n rounded-xl\n ${className}\n `.trim().replace(/\\s+/g, ' ')}\n {...props}\n >\n {/* Content Container */}\n <div className=\"p-6 flex flex-col gap-4\">\n {/* Text Section */}\n <div className=\"flex flex-col gap-3\">\n {/* Title */}\n <p className=\"text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary\">\n {title}\n </p>\n\n {/* Description (optional) */}\n {description && (\n <p className=\"text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary\">\n {description}\n </p>\n )}\n </div>\n\n {/* Body Content (optional) */}\n {children && (\n <div className=\"flex flex-col gap-3\">\n {children}\n </div>\n )}\n\n {/* Actions */}\n <div className=\"flex flex-wrap gap-3 items-center justify-end\">\n {actionButtons}\n </div>\n </div>\n </div>\n );\n }\n);\n\nAlert.displayName = 'Alert';\n","import { forwardRef, cloneElement } from 'react';\nimport type { BadgeProps, BadgeColor } from './Badge.types';\n\n/**\n * Badge del sistema de diseño Siesa\n *\n * Componente para mostrar etiquetas con múltiples variantes de color.\n * Los badges mantienen sus colores vibrantes en light y dark mode para\n * garantizar visibilidad y consistencia visual.\n *\n * Características implementadas:\n * - 21 variantes de color (zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, primary, secondary, tertiary)\n * - Icono opcional a la izquierda (12x12px)\n * - Contador/notification badge opcional\n * - Estados hover con transiciones suaves\n * - Los colores se mantienen vibrantes en dark mode (según diseño Figma)\n * - Tipografía: Label Tiny (12px Bold)\n *\n * Mejores prácticas implementadas:\n * - Tokens de color de Tailwind estándar para badges\n * - Font-family explícita (SiesaBT via font-sans)\n * - Transiciones suaves (duration-200)\n * - Estructura clara y mantenible\n *\n * @see docs/typography.md - Sistema tipográfico (Label Tiny)\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4130-9382\n *\n * @example\n * ```tsx\n * // Badge simple\n * <Badge color=\"blue\" label=\"Label\" />\n *\n * // Badge con icono\n * <Badge color=\"green\" label=\"Success\" leftIcon={<CheckIcon />} />\n *\n * // Badge con contador\n * <Badge color=\"red\" label=\"Errors\" count={5} />\n *\n * // Badge completo\n * <Badge color=\"primary\" label=\"Messages\" leftIcon={<MailIcon />} count={12} />\n * ```\n */\nexport const Badge = forwardRef<HTMLDivElement, BadgeProps>(\n (\n {\n color = 'zinc',\n leftIcon,\n label,\n count,\n className = '',\n ...props\n },\n ref\n ) => {\n // Map de colores - En dark mode mantienen los mismos colores vibrantes según Figma\n const colorClasses: Record<BadgeColor, { bg: string; text: string; hover: string; notificationBg: string; notificationText: string }> = {\n zinc: {\n bg: 'bg-zinc-100',\n text: 'text-zinc-600',\n hover: 'hover:bg-zinc-200',\n notificationBg: 'bg-zinc-600',\n notificationText: 'text-zinc-100',\n },\n red: {\n bg: 'bg-red-100',\n text: 'text-red-700',\n hover: 'hover:bg-red-200',\n notificationBg: 'bg-red-700',\n notificationText: 'text-red-100',\n },\n orange: {\n bg: 'bg-orange-100',\n text: 'text-orange-700',\n hover: 'hover:bg-orange-200',\n notificationBg: 'bg-orange-700',\n notificationText: 'text-orange-100',\n },\n amber: {\n bg: 'bg-amber-100',\n text: 'text-amber-700',\n hover: 'hover:bg-amber-200',\n notificationBg: 'bg-amber-700',\n notificationText: 'text-amber-100',\n },\n yellow: {\n bg: 'bg-yellow-100',\n text: 'text-yellow-700',\n hover: 'hover:bg-yellow-200',\n notificationBg: 'bg-yellow-700',\n notificationText: 'text-yellow-100',\n },\n lime: {\n bg: 'bg-lime-100',\n text: 'text-lime-700',\n hover: 'hover:bg-lime-200',\n notificationBg: 'bg-lime-700',\n notificationText: 'text-lime-100',\n },\n green: {\n bg: 'bg-green-100',\n text: 'text-green-700',\n hover: 'hover:bg-green-200',\n notificationBg: 'bg-green-700',\n notificationText: 'text-green-100',\n },\n emerald: {\n bg: 'bg-emerald-100',\n text: 'text-emerald-700',\n hover: 'hover:bg-emerald-200',\n notificationBg: 'bg-emerald-700',\n notificationText: 'text-emerald-100',\n },\n teal: {\n bg: 'bg-teal-100',\n text: 'text-teal-700',\n hover: 'hover:bg-teal-200',\n notificationBg: 'bg-teal-700',\n notificationText: 'text-teal-100',\n },\n cyan: {\n bg: 'bg-cyan-100',\n text: 'text-cyan-700',\n hover: 'hover:bg-cyan-200',\n notificationBg: 'bg-cyan-700',\n notificationText: 'text-cyan-100',\n },\n sky: {\n bg: 'bg-sky-100',\n text: 'text-sky-700',\n hover: 'hover:bg-sky-200',\n notificationBg: 'bg-sky-700',\n notificationText: 'text-sky-100',\n },\n blue: {\n bg: 'bg-blue-100',\n text: 'text-blue-700',\n hover: 'hover:bg-blue-200',\n notificationBg: 'bg-blue-700',\n notificationText: 'text-blue-100',\n },\n indigo: {\n bg: 'bg-indigo-100',\n text: 'text-indigo-700',\n hover: 'hover:bg-indigo-200',\n notificationBg: 'bg-indigo-700',\n notificationText: 'text-indigo-100',\n },\n violet: {\n bg: 'bg-violet-100',\n text: 'text-violet-700',\n hover: 'hover:bg-violet-200',\n notificationBg: 'bg-violet-700',\n notificationText: 'text-violet-100',\n },\n purple: {\n bg: 'bg-purple-100',\n text: 'text-purple-700',\n hover: 'hover:bg-purple-200',\n notificationBg: 'bg-purple-700',\n notificationText: 'text-purple-100',\n },\n fuchsia: {\n bg: 'bg-fuchsia-100',\n text: 'text-fuchsia-700',\n hover: 'hover:bg-fuchsia-200',\n notificationBg: 'bg-fuchsia-700',\n notificationText: 'text-fuchsia-100',\n },\n pink: {\n bg: 'bg-pink-100',\n text: 'text-pink-700',\n hover: 'hover:bg-pink-200',\n notificationBg: 'bg-pink-700',\n notificationText: 'text-pink-100',\n },\n rose: {\n bg: 'bg-rose-100',\n text: 'text-rose-700',\n hover: 'hover:bg-rose-200',\n notificationBg: 'bg-rose-700',\n notificationText: 'text-rose-100',\n },\n primary: {\n bg: 'bg-primary-custom-100',\n text: 'text-primary-custom-600',\n hover: 'hover:bg-primary-custom-200',\n notificationBg: 'bg-primary-custom-600',\n notificationText: 'text-primary-custom-100',\n },\n secondary: {\n bg: 'bg-zinc-100',\n text: 'text-zinc-600',\n hover: 'hover:bg-zinc-200',\n notificationBg: 'bg-zinc-600',\n notificationText: 'text-zinc-100',\n },\n tertiary: {\n bg: 'bg-zinc-100',\n text: 'text-zinc-600',\n hover: 'hover:bg-zinc-200',\n notificationBg: 'bg-zinc-600',\n notificationText: 'text-zinc-100',\n },\n };\n\n const colors = colorClasses[color];\n\n // Renderizar icono con tamaño correcto (12x12)\n const renderIcon = (icon: React.ReactElement) => {\n const existingClassName = (icon.props as any).className || '';\n return cloneElement(icon as React.ReactElement<any>, {\n className: `w-3 h-3 ${existingClassName}`.trim(),\n });\n };\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [\n 'inline-flex',\n 'items-center',\n 'gap-1',\n 'px-1.5',\n 'py-1',\n 'rounded-md',\n 'font-sans',\n colors.bg,\n colors.hover,\n 'transition-colors',\n 'duration-200',\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div\n ref={ref}\n className={finalClasses}\n {...props}\n >\n {/* Icono izquierdo */}\n {leftIcon && (\n <div className={`flex items-center justify-center ${colors.text}`}>\n {renderIcon(leftIcon)}\n </div>\n )}\n\n {/* Label del badge */}\n <span className={`font-sans text-xs leading-4 ${colors.text}`}>\n {label}\n </span>\n\n {/* Notification badge (contador) */}\n {count !== undefined && (\n <div\n className={`\n h-3\n flex\n items-center\n justify-center\n px-0.5\n rounded-xs\n min-w-[12px]\n ${colors.notificationBg}\n `.trim().replace(/\\s+/g, ' ')}\n >\n <span className={`font-sans text-xs leading-4 ${colors.notificationText}`}>\n {count}\n </span>\n </div>\n )}\n </div>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n","import { forwardRef, useState, useEffect } from 'react';\nimport type { QuantityProps } from './Quantity.types';\n\n/**\n * Quantity - Componente de cantidad del sistema de diseño Siesa\n *\n * Componente para seleccionar cantidades con soporte para:\n * - Botones de incremento/decremento\n * - Valores mínimo y máximo\n * - Label opcional con link\n * - Texto de ayuda opcional\n * - Estado de error\n * - Estado deshabilitado\n * - Dark mode completo\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Focus rings adaptativos para light y dark mode\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Quantity\n * label=\"Cantidad\"\n * value={5}\n * min={0}\n * max={10}\n * onChange={(value) => console.log(value)}\n * />\n * ```\n */\nexport const Quantity = forwardRef<HTMLDivElement, QuantityProps>(\n (\n {\n value: controlledValue,\n defaultValue = 0,\n onChange,\n min = 0,\n max,\n label,\n linkText,\n onLinkClick,\n helperText,\n error = false,\n disabled = false,\n className = '',\n ...props\n },\n ref\n ) => {\n // Estado interno para valor no controlado\n const [internalValue, setInternalValue] = useState(defaultValue);\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n\n // Sincronizar valor interno con defaultValue cuando cambia\n useEffect(() => {\n if (!isControlled) {\n setInternalValue(defaultValue);\n }\n }, [defaultValue, isControlled]);\n\n // Handler para cambio de valor\n const handleValueChange = (newValue: number) => {\n // Aplicar restricciones de min/max\n let clampedValue = newValue;\n if (min !== undefined && clampedValue < min) {\n clampedValue = min;\n }\n if (max !== undefined && clampedValue > max) {\n clampedValue = max;\n }\n\n // Actualizar estado interno si no está controlado\n if (!isControlled) {\n setInternalValue(clampedValue);\n }\n\n // Llamar onChange si existe\n onChange?.(clampedValue);\n };\n\n // Handlers para botones\n const handleDecrement = () => {\n if (disabled) return;\n handleValueChange(currentValue - 1);\n };\n\n const handleIncrement = () => {\n if (disabled) return;\n handleValueChange(currentValue + 1);\n };\n\n // Verificar si los botones deben estar deshabilitados\n const isDecrementDisabled = disabled || (min !== undefined && currentValue <= min);\n const isIncrementDisabled = disabled || (max !== undefined && currentValue >= max);\n\n // Iconos SVG inline\n const MinusIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 8H13\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n\n const PlusIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8 3V13M3 8H13\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n\n // Clases para el estado (usando especificaciones exactas de Figma)\n const borderClass = error\n ? 'border-error-border dark:border-error-border'\n : 'border-border-primary dark:border-dark-border-primary';\n\n const hoverClass = !disabled && !error\n ? 'hover:border-[#f9f9f9] dark:hover:border-[#f9f9f9]'\n : '';\n\n const focusClass = !disabled && !error\n ? 'focus-within:border-2 focus-within:border-[#329cff] dark:focus-within:border-[#329cff]'\n : '';\n\n return (\n <div\n ref={ref}\n className={`flex flex-col gap-2 ${className}`.trim()}\n {...props}\n >\n {/* Label con link opcional */}\n {label && (\n <div className=\"flex items-center justify-between\">\n <label className=\"text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary\">\n {label}\n </label>\n {linkText && (\n <button\n type=\"button\"\n onClick={onLinkClick}\n disabled={disabled}\n className={`\n text-xs leading-4\n text-primary-custom-600\n hover:underline\n dark:text-primary-custom-600\n ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}\n transition-colors\n duration-200\n `.trim().replace(/\\s+/g, ' ')}\n >\n {linkText}\n </button>\n )}\n </div>\n )}\n\n {/* Input con botones */}\n <div\n className={`\n flex\n items-center\n gap-2\n px-3\n py-1.5\n bg-white\n dark:bg-dark-bg-primary\n border\n ${borderClass}\n ${hoverClass}\n ${focusClass}\n rounded-lg\n transition-colors\n duration-200\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n `.trim().replace(/\\s+/g, ' ')}\n >\n {/* Botón decrementar */}\n <button\n type=\"button\"\n onClick={handleDecrement}\n disabled={isDecrementDisabled}\n className={`\n flex\n items-center\n justify-center\n w-4\n h-4\n ${isDecrementDisabled\n ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'\n : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'\n }\n transition-colors\n duration-200\n `.trim().replace(/\\s+/g, ' ')}\n aria-label=\"Decrementar\"\n >\n <MinusIcon />\n </button>\n\n {/* Valor actual */}\n <div className=\"flex-1 text-center\">\n <span\n className={`\n text-base leading-6\n ${currentValue === 0\n ? 'text-content-tertiary dark:text-content-tertiary'\n : 'text-content-primary dark:text-dark-content-primary'\n }\n `.trim().replace(/\\s+/g, ' ')}\n >\n {currentValue}\n </span>\n </div>\n\n {/* Botón incrementar */}\n <button\n type=\"button\"\n onClick={handleIncrement}\n disabled={isIncrementDisabled}\n className={`\n flex\n items-center\n justify-center\n w-4\n h-4\n ${isIncrementDisabled\n ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'\n : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'\n }\n transition-colors\n duration-200\n `.trim().replace(/\\s+/g, ' ')}\n aria-label=\"Incrementar\"\n >\n <PlusIcon />\n </button>\n </div>\n\n {/* Helper text */}\n {helperText && (\n <p\n className={`\n text-sm leading-5\n ${error\n ? 'text-error-content dark:text-error-content'\n : 'text-content-tertiary dark:text-content-tertiary'\n }\n `.trim().replace(/\\s+/g, ' ')}\n >\n {helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nQuantity.displayName = 'Quantity';\n","/**\n * Iconos para el componente Dropdown\n * Usando heroicons-micro según especificaciones de Figma\n */\n\nexport const ChevronDownIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const CogIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.461 3.39a.5.5 0 0 1 .639-.206l1.703.768c.433-.36.928-.649 1.466-.847l.186-1.858ZM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const UserIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <path d=\"M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z\" />\n </svg>\n);\n\nexport const BellIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const CreditCardIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <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\" />\n <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\" />\n </svg>\n);\n","import React, { useState, useRef, useEffect } from 'react';\nimport type {\n DropdownProps,\n DropdownItemProps,\n DropdownHeadingProps,\n DropdownDividerProps,\n} from './Dropdown.types';\nimport { ChevronDownIcon } from './icons';\n\n/**\n * Componente Dropdown del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels y keyboard navigation\n * - Cierre automático al hacer click fuera\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/shadows.md - Sistema de sombras\n *\n * @example\n * ```tsx\n * <Dropdown\n * placeholder=\"Options\"\n * items={[\n * { children: 'Account', icon: <UserIcon /> },\n * { children: 'Settings', icon: <CogIcon /> },\n * { isDivider: true },\n * { children: 'Logout' },\n * ]}\n * />\n * ```\n */\nexport const Dropdown: React.FC<DropdownProps> = ({\n variant = 'default',\n children,\n items,\n open: controlledOpen,\n onOpenChange,\n disabled = false,\n className = '',\n menuClassName = '',\n ariaLabel,\n placeholder = 'Options',\n}) => {\n const [internalOpen, setInternalOpen] = useState(false);\n const dropdownRef = useRef<HTMLDivElement>(null);\n\n // Determinar si es controlado o no controlado\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : internalOpen;\n\n // Función para cambiar el estado\n const handleToggle = () => {\n if (disabled) return;\n\n const newOpen = !isOpen;\n\n if (!isControlled) {\n setInternalOpen(newOpen);\n }\n\n onOpenChange?.(newOpen);\n };\n\n // Cerrar al hacer click fuera\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n if (!isControlled) {\n setInternalOpen(false);\n }\n onOpenChange?.(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }\n }, [isOpen, isControlled, onOpenChange]);\n\n // Cerrar al presionar Escape\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isOpen) {\n if (!isControlled) {\n setInternalOpen(false);\n }\n onOpenChange?.(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('keydown', handleEscape);\n return () => {\n document.removeEventListener('keydown', handleEscape);\n };\n }\n }, [isOpen, isControlled, onOpenChange]);\n\n // Handler para item click\n const handleItemClick = (item: DropdownItemProps) => {\n if (item.disabled || item.isDivider || item.isHeading) return;\n\n // Ejecutar el onClick del item\n if (item.onClick) {\n item.onClick({} as React.MouseEvent<HTMLButtonElement>);\n }\n\n // Cerrar el dropdown\n if (!isControlled) {\n setInternalOpen(false);\n }\n onOpenChange?.(false);\n };\n\n // ===== CLASES DEL TRIGGER BUTTON =====\n const triggerClasses = [\n // Base\n 'inline-flex',\n 'items-center',\n 'justify-center',\n 'rounded-lg',\n 'font-bold',\n 'text-sm',\n 'whitespace-nowrap',\n 'transition-all',\n 'duration-150',\n\n // Variant-specific sizing\n variant === 'icon-only' ? 'w-9 h-9' : 'gap-3 px-3 py-2',\n\n // Colores y estados (Light Mode)\n 'bg-bg-primary',\n 'text-content-secondary',\n 'border',\n 'border-border-primary',\n 'hover:bg-background-secondary',\n 'active:scale-95',\n\n // Dark Mode\n 'dark:bg-dark-bg-primary',\n 'dark:text-content-secondary',\n 'dark:border-dark-border-primary',\n 'dark:hover:bg-dark-bg-primary',\n\n // Focus ring\n 'focus:outline-hidden',\n 'focus:ring-2',\n 'focus:ring-primary-custom-400',\n 'focus:ring-offset-2',\n 'dark:focus:ring-dark-border-custom',\n 'dark:focus:ring-offset-dark-bg-primary',\n\n // Disabled\n disabled && 'opacity-50',\n disabled && 'cursor-not-allowed',\n disabled && 'pointer-events-none',\n\n // Custom classes\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL MENU =====\n const menuClasses = [\n // Base\n 'absolute',\n 'top-full',\n 'left-0',\n 'mt-2',\n 'min-w-[182px]',\n 'rounded-xl',\n 'p-1',\n 'border',\n 'z-50',\n\n // Colores (Light Mode)\n 'bg-background-secondary',\n 'border-border-primary',\n\n // Dark Mode\n 'dark:bg-dark-bg-primary',\n 'dark:border-dark-border-primary',\n\n // Shadow\n 'shadow-menu',\n\n // Custom classes\n menuClassName,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div ref={dropdownRef} className=\"relative inline-block\">\n {/* Trigger Button */}\n <button\n type=\"button\"\n className={triggerClasses}\n onClick={handleToggle}\n disabled={disabled}\n aria-label={ariaLabel || (variant === 'icon-only' ? 'Abrir menú' : undefined)}\n aria-haspopup=\"true\"\n aria-expanded={isOpen}\n >\n {variant === 'default' && <span>{children || placeholder}</span>}\n <ChevronDownIcon />\n </button>\n\n {/* Dropdown Menu */}\n {isOpen && (\n <div className={menuClasses}>\n {items.map((item, index) => {\n if (item.isDivider) {\n return <DropdownDivider key={index} className={item.className} />;\n }\n\n if (item.isHeading) {\n return (\n <DropdownHeading key={index} className={item.className}>\n {item.children}\n </DropdownHeading>\n );\n }\n\n return (\n <DropdownItem\n key={index}\n {...item}\n onClick={() => handleItemClick(item)}\n />\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\n/**\n * Componente DropdownItem\n * Item individual dentro del menú dropdown\n *\n * @example\n * ```tsx\n * <DropdownItem icon={<UserIcon />} shortcut=\"⌘ P\">\n * Profile\n * </DropdownItem>\n * ```\n */\nexport const DropdownItem: React.FC<DropdownItemProps> = ({\n children,\n icon,\n description,\n shortcut,\n disabled = false,\n selected = false,\n onClick,\n className = '',\n}) => {\n // ===== CLASES DEL ITEM =====\n const itemClasses = [\n // Base\n 'flex',\n 'items-center',\n 'gap-3',\n 'px-4',\n 'py-2',\n 'rounded-lg',\n 'text-sm',\n 'w-full',\n 'text-left',\n 'transition-colors',\n 'duration-150',\n\n // Colores y estados (Light Mode)\n 'text-content-primary',\n !disabled && 'hover:bg-white',\n selected && 'bg-white',\n\n // Dark Mode\n 'dark:text-dark-content-primary',\n !disabled && 'dark:hover:bg-dark-bg-primary',\n selected && 'dark:bg-dark-bg-primary',\n\n // Disabled\n disabled && 'opacity-50',\n disabled && 'cursor-not-allowed',\n !disabled && 'cursor-pointer',\n\n // Custom classes\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type=\"button\"\n className={itemClasses}\n onClick={onClick}\n disabled={disabled}\n >\n {/* Icon */}\n {icon && (\n <span className=\"inline-flex items-center justify-center w-4 h-4 text-content-secondary dark:text-content-secondary\">\n {icon}\n </span>\n )}\n\n {/* Content */}\n <div className=\"flex-1 min-w-0\">\n {/* Label */}\n <div className=\"text-content-primary dark:text-dark-content-primary\">\n {children}\n </div>\n\n {/* Description */}\n {description && (\n <div className=\"text-xs text-content-secondary dark:text-content-secondary mt-0.5\">\n {description}\n </div>\n )}\n </div>\n\n {/* Shortcut */}\n {shortcut && (\n <span className=\"text-xs text-content-secondary dark:text-content-secondary ml-auto whitespace-nowrap\">\n {shortcut}\n </span>\n )}\n </button>\n );\n};\n\n/**\n * Componente DropdownHeading\n * Encabezado de sección dentro del menú dropdown\n *\n * @example\n * ```tsx\n * <DropdownHeading>My events</DropdownHeading>\n * ```\n */\nexport const DropdownHeading: React.FC<DropdownHeadingProps> = ({\n children,\n className = '',\n}) => {\n // ===== CLASES DEL HEADING =====\n const headingClasses = [\n // Base\n 'px-4',\n 'py-1',\n 'text-xs',\n 'font-normal',\n\n // Colores\n 'text-content-tertiary',\n\n // Dark Mode\n 'dark:text-content-tertiary',\n\n // Custom classes\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return <div className={headingClasses}>{children}</div>;\n};\n\n/**\n * Componente DropdownDivider\n * Separador visual entre items del menú dropdown\n *\n * @example\n * ```tsx\n * <DropdownDivider />\n * ```\n */\nexport const DropdownDivider: React.FC<DropdownDividerProps> = ({\n className = '',\n}) => {\n // ===== CLASES DEL DIVIDER =====\n const dividerClasses = [\n // Base\n 'px-4',\n 'py-1',\n\n // Custom classes\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div className={dividerClasses}>\n <div className=\"h-px bg-border-primary dark:bg-dark-border-primary\" />\n </div>\n );\n};\n","import React from 'react';\nimport type { NotificationProps } from './Notification.types';\n\n/**\n * Componente Notification del sistema de diseño Siesa\n *\n * Badge de notificación para indicar alertas, mensajes o notificaciones pendientes.\n * Puede mostrar un punto simple o un contador numérico con límite automático a 99+.\n *\n * **Especificaciones de Figma:**\n * - Badge con número: 27px × 13px (aprox), Label/XXSmall (10px Bold, line-height 12px)\n * - Badge simple (dot): 13px × 13px\n * - Color: `content-extensions-red` (#b91c1c) por defecto\n * - Border radius: Pill (rounded-full)\n * - Padding: 4px horizontal\n *\n * **Variantes:**\n * - Sin count: Muestra punto circular (dot)\n * - Con count: Muestra badge con número (máximo 99+)\n *\n * **Uso típico:**\n * - Como overlay en iconos o botones\n * - En elementos de menú o navegación\n * - Standalone para indicar estado\n *\n * @see docs/colors.md - Sistema de colores (token content-extensions-red)\n * @see docs/typography.md - Sistema tipográfico (Label/XXSmall)\n * @see src/components/Button/Button.tsx - Referencia de badges en botones\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4310-22651\n *\n * @example\n * ```tsx\n * // Badge simple (punto)\n * <Notification />\n *\n * // Badge con número\n * <Notification count={5} />\n *\n * // Badge con muchos (muestra 99+)\n * <Notification count={150} />\n *\n * // Con color personalizado\n * <Notification count={3} color=\"green\" />\n *\n * // Como overlay en botón\n * <button className=\"relative\">\n * <BellIcon />\n * <Notification count={5} className=\"absolute -top-1 -right-1\" />\n * </button>\n * ```\n */\nexport const Notification: React.FC<NotificationProps> = ({\n count,\n color = 'red',\n className = '',\n ariaLabel,\n}) => {\n // ===== MAPA DE COLORES =====\n // Sistema de colores consistente con Button y Badge\n const colorClasses: Record<string, { bg: string; text: string }> = {\n zinc: { bg: 'bg-zinc-600', text: 'text-white' },\n red: { bg: 'bg-content-extensions-red', text: 'text-white' },\n orange: { bg: 'bg-orange-700', text: 'text-white' },\n amber: { bg: 'bg-amber-700', text: 'text-white' },\n yellow: { bg: 'bg-yellow-700', text: 'text-white' },\n lime: { bg: 'bg-lime-700', text: 'text-white' },\n green: { bg: 'bg-green-700', text: 'text-white' },\n emerald: { bg: 'bg-emerald-700', text: 'text-white' },\n teal: { bg: 'bg-teal-700', text: 'text-white' },\n cyan: { bg: 'bg-cyan-700', text: 'text-white' },\n sky: { bg: 'bg-sky-700', text: 'text-white' },\n blue: { bg: 'bg-blue-700', text: 'text-white' },\n indigo: { bg: 'bg-indigo-700', text: 'text-white' },\n violet: { bg: 'bg-violet-700', text: 'text-white' },\n purple: { bg: 'bg-purple-700', text: 'text-white' },\n fuchsia: { bg: 'bg-fuchsia-700', text: 'text-white' },\n pink: { bg: 'bg-pink-700', text: 'text-white' },\n rose: { bg: 'bg-rose-700', text: 'text-white' },\n primary: { bg: 'bg-primary-custom-600', text: 'text-white' },\n secondary: { bg: 'bg-zinc-600', text: 'text-white' },\n tertiary: { bg: 'bg-zinc-600', text: 'text-white' },\n };\n\n const colors = colorClasses[color] || colorClasses.red;\n\n // ===== ARIA LABEL DINÁMICO =====\n const dynamicAriaLabel = ariaLabel ||\n (count !== undefined && count > 0\n ? `${count} notificaci${count === 1 ? 'ón' : 'ones'}`\n : 'Notificación pendiente');\n\n // ===== BADGE CON NÚMERO =====\n if (count !== undefined && count > 0) {\n const displayCount = count > 99 ? '99+' : count.toString();\n\n return (\n <span\n className={`\n inline-flex\n items-center\n justify-center\n min-w-[16px]\n h-4\n px-1\n rounded-full\n text-[10px]\n font-bold\n leading-none\n ${colors.bg}\n ${colors.text}\n pointer-events-none\n dark:${colors.bg}\n dark:${colors.text}\n ${className}\n `\n .trim()\n .replace(/\\s+/g, ' ')}\n role=\"status\"\n aria-label={dynamicAriaLabel}\n >\n {displayCount}\n </span>\n );\n }\n\n // ===== BADGE SIMPLE (DOT) =====\n return (\n <span\n className={`\n inline-block\n w-2\n h-2\n rounded-full\n ${colors.bg}\n pointer-events-none\n dark:${colors.bg}\n ${className}\n `\n .trim()\n .replace(/\\s+/g, ' ')}\n role=\"status\"\n aria-label={dynamicAriaLabel}\n />\n );\n};\n","import React from 'react';\n\n/**\n * Icono de flecha izquierda (ChevronLeft)\n * Usado en el botón \"Back\"\n * Heroicons Micro (16x16px)\n */\nexport const ArrowLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => {\n return (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n\n/**\n * Icono de flecha derecha (ChevronRight)\n * Usado en el botón \"Next\"\n * Heroicons Micro (16x16px)\n */\nexport const ArrowRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => {\n return (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n","import React, { useMemo } from 'react';\nimport type { PaginationProps, PageButtonProps } from './Pagination.types';\nimport { ArrowLeftIcon, ArrowRightIcon } from './icons';\n\n/**\n * Componente Pagination del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n * - Algoritmo de paginación inteligente\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label Small)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Pagination\n * currentPage={1}\n * totalPages={66}\n * onPageChange={(page) => console.log(page)}\n * />\n * ```\n */\nexport const Pagination: React.FC<PaginationProps> = ({\n currentPage = 1,\n totalPages,\n onPageChange,\n backText = 'Atrás',\n nextText = 'Siguiente',\n siblingCount = 1,\n showBackButton = true,\n showNextButton = true,\n className = '',\n ariaLabel = 'Paginación',\n}) => {\n /**\n * Genera el array de páginas a mostrar\n * Algoritmo: [1] ... [currentPage-1] [currentPage] [currentPage+1] ... [totalPages]\n */\n const paginationRange = useMemo(() => {\n const totalNumbers = siblingCount * 2 + 3; // Página actual + siblings + primera + última\n const totalBlocks = totalNumbers + 2; // + 2 separadores \"...\"\n\n // Si el total de páginas es menor que el total de bloques, mostrar todas\n if (totalPages <= totalBlocks) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\n\n const shouldShowLeftDots = leftSiblingIndex > 2;\n const shouldShowRightDots = rightSiblingIndex < totalPages - 1;\n\n const firstPageIndex = 1;\n const lastPageIndex = totalPages;\n\n // No mostrar dots a la izquierda\n if (!shouldShowLeftDots && shouldShowRightDots) {\n const leftItemCount = 3 + 2 * siblingCount;\n const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);\n return [...leftRange, '...', totalPages];\n }\n\n // No mostrar dots a la derecha\n if (shouldShowLeftDots && !shouldShowRightDots) {\n const rightItemCount = 3 + 2 * siblingCount;\n const rightRange = Array.from(\n { length: rightItemCount },\n (_, i) => totalPages - rightItemCount + i + 1\n );\n return [firstPageIndex, '...', ...rightRange];\n }\n\n // Mostrar ambos dots\n if (shouldShowLeftDots && shouldShowRightDots) {\n const middleRange = Array.from(\n { length: rightSiblingIndex - leftSiblingIndex + 1 },\n (_, i) => leftSiblingIndex + i\n );\n return [firstPageIndex, '...', ...middleRange, '...', lastPageIndex];\n }\n\n return [];\n }, [currentPage, totalPages, siblingCount]);\n\n /**\n * Handler para cambio de página\n */\n const handlePageChange = (page: number) => {\n if (page >= 1 && page <= totalPages && page !== currentPage) {\n onPageChange?.(page);\n }\n };\n\n /**\n * Componente interno: Botón de página\n */\n const PageButton: React.FC<PageButtonProps> = ({\n page,\n isActive = false,\n disabled = false,\n onClick,\n ariaLabel: buttonAriaLabel,\n }) => {\n const isDots = page === '...';\n\n // ===== CLASES BASE =====\n const baseClasses = `\n inline-flex\n items-center\n justify-center\n gap-3\n px-3\n py-2\n rounded-md\n font-bold\n text-sm\n whitespace-nowrap\n transition-all\n duration-150\n `;\n\n // ===== CLASES DE ESTADO =====\n const stateClasses = isDots\n ? `\n text-primary-custom-600\n dark:text-primary-custom-600\n cursor-default\n pointer-events-none\n `\n : isActive\n ? `\n bg-primary-custom-100\n text-primary-custom-600\n dark:bg-primary-custom-100\n dark:text-primary-custom-600\n `\n : `\n text-primary-custom-600\n hover:bg-primary-custom-100\n active:scale-95\n dark:text-primary-custom-600\n dark:hover:bg-primary-custom-100\n dark:active:scale-95\n `;\n\n // ===== CLASES DE DISABLED =====\n const disabledClasses = disabled\n ? `\n opacity-50\n cursor-not-allowed\n pointer-events-none\n `\n : '';\n\n // ===== COMBINAR CLASES =====\n const buttonClasses = [baseClasses, stateClasses, disabledClasses]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type=\"button\"\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled || isDots}\n aria-label={buttonAriaLabel}\n aria-current={isActive ? 'page' : undefined}\n >\n {page}\n </button>\n );\n };\n\n // ===== CLASES DEL CONTAINER =====\n const containerClasses = `\n inline-flex\n items-center\n justify-between\n gap-0\n ${className}\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <nav className={containerClasses} aria-label={ariaLabel} role=\"navigation\">\n {/* ===== BOTÓN BACK ===== */}\n {showBackButton && (\n <button\n type=\"button\"\n className={`\n inline-flex\n items-center\n justify-center\n gap-3\n px-3\n py-2\n rounded-md\n font-bold\n text-sm\n text-primary-custom-600\n hover:bg-primary-custom-100\n active:scale-95\n dark:text-primary-custom-600\n dark:hover:bg-primary-custom-100\n dark:active:scale-95\n transition-all\n duration-150\n ${currentPage === 1 ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n onClick={() => handlePageChange(currentPage - 1)}\n disabled={currentPage === 1}\n aria-label={`${backText} page`}\n >\n <ArrowLeftIcon className=\"w-4 h-4\" />\n {backText}\n </button>\n )}\n\n {/* ===== NÚMEROS DE PÁGINA ===== */}\n <div className=\"inline-flex items-center\">\n {paginationRange.map((page, index) => (\n <PageButton\n key={`${page}-${index}`}\n page={page}\n isActive={page === currentPage}\n onClick={() => typeof page === 'number' && handlePageChange(page)}\n ariaLabel={\n typeof page === 'number' ? `Go to page ${page}` : `Page ${page}`\n }\n />\n ))}\n </div>\n\n {/* ===== BOTÓN NEXT ===== */}\n {showNextButton && (\n <button\n type=\"button\"\n className={`\n inline-flex\n items-center\n justify-center\n gap-3\n px-3\n py-2\n rounded-md\n font-bold\n text-sm\n text-primary-custom-600\n hover:bg-primary-custom-100\n active:scale-95\n dark:text-primary-custom-600\n dark:hover:bg-primary-custom-100\n dark:active:scale-95\n transition-all\n duration-150\n ${\n currentPage === totalPages\n ? 'opacity-50 cursor-not-allowed pointer-events-none'\n : ''\n }\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n onClick={() => handlePageChange(currentPage + 1)}\n disabled={currentPage === totalPages}\n aria-label={`${nextText} page`}\n >\n {nextText}\n <ArrowRightIcon className=\"w-4 h-4\" />\n </button>\n )}\n </nav>\n );\n};\n","import React from 'react';\n\n/**\n * Icono ChevronUpDown para el trigger del Select\n * Heroicons Micro (16x16px)\n */\nexport const ChevronUpDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => {\n return (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z\"\n clipRule=\"evenodd\"\n />\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n\n/**\n * Icono Check para los items seleccionados del menu\n * Heroicons Micro (16x16px)\n */\nexport const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => {\n return (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n","import React, { useState, useRef, useEffect } from 'react';\nimport type { SelectProps, SelectOption } from './Select.types';\nimport { ChevronUpDownIcon, CheckIcon } from './icons';\n\n/**\n * Select - Componente de selección (dropdown) del sistema de diseño Siesa\n *\n * Componente Select personalizado con menú desplegable para seleccionar opciones\n * de una lista. Incluye navegación por teclado, click outside y dark mode completo.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels y keyboard navigation\n * - Click outside para cerrar el menú\n * - Soporte de teclado (Enter, Escape, Arrow Up/Down)\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Select\n * options={[\n * { value: '1', label: 'Option 1' },\n * { value: '2', label: 'Option 2' },\n * ]}\n * value={selectedValue}\n * onChange={setSelectedValue}\n * placeholder=\"Select an option\"\n * label=\"Choose one\"\n * />\n * ```\n */\nexport const Select: React.FC<SelectProps> = ({\n options = [],\n value,\n defaultValue,\n placeholder = 'Seleccionar...',\n disabled = false,\n error = false,\n label,\n description,\n showLabel = true,\n showDescription = true,\n menuHeader,\n onChange,\n className = '',\n triggerClassName = '',\n menuClassName = '',\n ariaLabel,\n id,\n name,\n required = false,\n menuPosition = 'bottom',\n fullWidth = false,\n}) => {\n // ===== ESTADO Y REFS =====\n const [isOpen, setIsOpen] = useState(false);\n const [selectedValue, setSelectedValue] = useState<string | number | undefined>(\n value !== undefined ? value : defaultValue\n );\n const [focusedIndex, setFocusedIndex] = useState(-1);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // ===== SINCRONIZAR VALOR CONTROLADO =====\n useEffect(() => {\n if (value !== undefined) {\n setSelectedValue(value);\n }\n }, [value]);\n\n // ===== CERRAR AL HACER CLICK FUERA =====\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }\n }, [isOpen]);\n\n // ===== KEYBOARD NAVIGATION =====\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (!isOpen) return;\n\n switch (event.key) {\n case 'Escape':\n setIsOpen(false);\n triggerRef.current?.focus();\n break;\n case 'ArrowDown':\n event.preventDefault();\n setFocusedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));\n break;\n case 'ArrowUp':\n event.preventDefault();\n setFocusedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));\n break;\n case 'Enter':\n event.preventDefault();\n if (focusedIndex >= 0 && focusedIndex < options.length) {\n handleSelect(options[focusedIndex]);\n }\n break;\n }\n };\n\n if (isOpen) {\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }\n }, [isOpen, focusedIndex, options]);\n\n // ===== HELPERS =====\n const selectedOption = options.find((opt) => opt.value === selectedValue);\n\n const toggleMenu = () => {\n if (!disabled) {\n setIsOpen(!isOpen);\n setFocusedIndex(-1);\n }\n };\n\n const handleSelect = (option: SelectOption) => {\n if (option.disabled) return;\n\n setSelectedValue(option.value);\n setIsOpen(false);\n onChange?.(option.value);\n\n setTimeout(() => {\n triggerRef.current?.focus();\n }, 0);\n };\n\n // ===== CLASES BASE DEL TRIGGER =====\n // Usando el sistema tipográfico Paragraph Regular (14px = text-sm)\n // Border radius rounded-lg (8px) consistente con especificaciones\n // Gap de 12px (gap-3) entre texto e icono según Figma\n const baseTriggerClasses = `\n inline-flex\n items-center\n justify-between\n gap-3\n w-full\n px-3\n py-2\n text-sm\n font-normal\n leading-5\n rounded-lg\n border\n transition-all\n duration-150\n `;\n\n // ===== CLASES DE WIDTH =====\n const widthClasses = fullWidth ? 'w-full' : 'min-w-[200px]';\n\n // ===== CLASES PARA ESTADOS DEL TRIGGER =====\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n const triggerStateClasses = error\n ? `\n border-error-border\n bg-error-bg\n text-content-primary\n dark:border-error-border\n dark:bg-error-bg\n dark:text-dark-content-primary\n `\n : `\n bg-bg-primary\n border-border-primary\n text-content-primary\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n dark:text-dark-content-primary\n `;\n\n // ===== CLASES PARA HOVER DEL TRIGGER =====\n // Hover overlay rgba(0,0,0,0.024) según Figma\n const triggerHoverClasses =\n !disabled && !error\n ? `\n hover:bg-[rgba(255,255,255,1)]\n hover:bg-[linear-gradient(90deg,rgba(0,0,0,0.024)_0%,rgba(0,0,0,0.024)_100%)]\n dark:hover:bg-[rgba(17,45,87,1)]\n dark:hover:bg-[linear-gradient(90deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.1)_100%)]\n `\n : '';\n\n // ===== CLASES PARA FOCUS DEL TRIGGER =====\n // Focus rings adaptativos siguiendo el patrón de otros componentes\n const triggerFocusClasses = !disabled\n ? `\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n `\n : '';\n\n // ===== CLASES PARA DISABLED DEL TRIGGER =====\n const triggerDisabledClasses = disabled\n ? `\n opacity-50\n cursor-not-allowed\n `\n : '';\n\n // ===== COMBINAR CLASES DEL TRIGGER =====\n const finalTriggerClasses = [\n baseTriggerClasses,\n widthClasses,\n triggerStateClasses,\n triggerHoverClasses,\n triggerFocusClasses,\n triggerDisabledClasses,\n triggerClassName,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES BASE DEL MENU =====\n // Según Figma: altura fija 160px (h-40), sin borde visible (border-0),\n // spacing de 4px desde trigger (mt-1), sin shadow prominente\n const baseMenuClasses = `\n absolute\n z-50\n w-full\n min-w-[200px]\n max-h-40\n overflow-y-auto\n p-1\n rounded-md\n border-0\n transition-all\n duration-150\n `;\n\n // ===== CLASES DE POSICIÓN DEL MENU =====\n // Figma muestra 4px de separación, usando mt-1 en lugar de mt-2\n const menuPositionClasses = menuPosition === 'top' ? 'bottom-full mb-1' : 'top-full mt-1';\n\n // ===== CLASES DE COLOR DEL MENU =====\n // Background secundario según Figma, sin borde prominente\n const menuColorClasses = `\n bg-background-secondary\n dark:bg-dark-bg-primary\n `;\n\n // ===== CLASES DE VISIBILIDAD DEL MENU =====\n const menuVisibilityClasses = isOpen ? 'opacity-100 visible' : 'opacity-0 invisible';\n\n // ===== COMBINAR CLASES DEL MENU =====\n const finalMenuClasses = [\n baseMenuClasses,\n menuPositionClasses,\n menuColorClasses,\n menuVisibilityClasses,\n menuClassName,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES BASE DEL MENU ITEM =====\n // CRÍTICO: Figma especifica text-[10px] leading-[12px] (Label XXSmall)\n // NO usar text-xs que es 12px - debe ser exactamente 10px según diseño\n const baseMenuItemClasses = `\n flex\n items-center\n cursor-pointer\n rounded-md\n transition-all\n duration-150\n pl-2\n pr-2.5\n py-0.5\n gap-0.5\n text-[10px]\n leading-[12px]\n font-bold\n `;\n\n // ===== FUNCIÓN PARA OBTENER CLASES DE MENU ITEM =====\n const getMenuItemClasses = (option: SelectOption, index: number) => {\n const isSelected = option.value === selectedValue;\n const isFocused = index === focusedIndex;\n\n // Estados de color\n const colorClasses =\n isSelected && !isFocused\n ? 'text-content-primary dark:text-dark-content-primary'\n : isFocused || (isSelected && isFocused)\n ? 'bg-primary-custom-600 text-primary-inverse-content dark:bg-primary-custom-600 dark:text-primary-inverse-content'\n : 'text-content-primary dark:text-dark-content-primary';\n\n // Hover\n const hoverClasses = !option.disabled\n ? 'hover:bg-primary-custom-600 hover:text-primary-inverse-content dark:hover:bg-primary-custom-600 dark:hover:text-primary-inverse-content'\n : '';\n\n // Disabled\n const disabledClasses = option.disabled ? 'opacity-50 cursor-not-allowed' : '';\n\n return [baseMenuItemClasses, colorClasses, hoverClasses, disabledClasses]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n };\n\n // ===== CLASES DEL ICONO DEL TRIGGER =====\n const iconClasses = [\n 'shrink-0',\n 'transition-transform',\n 'duration-150',\n isOpen && 'rotate-180',\n disabled ? 'text-content-tertiary dark:text-content-tertiary' : 'text-content-secondary dark:text-content-secondary',\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL CHECK ICON =====\n const checkIconClasses = 'shrink-0 w-4 h-4';\n\n // ===== RENDERIZAR COMPONENTE =====\n return (\n <div className={`relative ${fullWidth ? 'w-full' : ''} ${className}`} ref={containerRef}>\n {/* Label and Description - Según Figma, van ANTES del trigger con gap-1 (4px) */}\n {(showLabel && label) || (showDescription && description) ? (\n <div className=\"flex flex-col gap-1 mb-1 w-full\">\n {/* Label - Label Small (14px bold) */}\n {showLabel && label && (\n <label\n htmlFor={id}\n className=\"text-sm font-bold leading-5 text-content-primary dark:text-dark-content-primary\"\n >\n {label}\n {required && <span className=\"ml-1 text-error-content\">*</span>}\n </label>\n )}\n\n {/* Description - Paragraph Small (14px regular) */}\n {showDescription && description && (\n <p className=\"text-sm font-normal leading-5 text-content-tertiary dark:text-content-tertiary\">\n {description}\n </p>\n )}\n </div>\n ) : null}\n\n {/* Trigger Button */}\n <button\n ref={triggerRef}\n type=\"button\"\n className={finalTriggerClasses}\n onClick={toggleMenu}\n disabled={disabled}\n aria-label={ariaLabel || label}\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n id={id}\n >\n {/* Selected value or placeholder */}\n <span\n className={\n selectedOption ? '' : 'text-content-secondary dark:text-content-secondary'\n }\n >\n {selectedOption ? selectedOption.label : placeholder}\n </span>\n\n {/* Chevron icon */}\n <ChevronUpDownIcon className={iconClasses} />\n </button>\n\n {/* Hidden input for forms */}\n {name && (\n <input\n type=\"hidden\"\n name={name}\n value={selectedValue !== undefined ? String(selectedValue) : ''}\n />\n )}\n\n {/* Menu */}\n {isOpen && (\n <div ref={menuRef} className={finalMenuClasses} role=\"listbox\">\n {/* Menu Header - Opcional según Figma */}\n {menuHeader && (\n <div className=\"flex items-center gap-0.5 px-6 py-0.5 rounded-[5px]\">\n <span className=\"text-[10px] font-bold leading-[12px] text-content-tertiary dark:text-content-tertiary\">\n {menuHeader}\n </span>\n </div>\n )}\n\n {/* Empty state */}\n {options.length === 0 && (\n <div className=\"px-2 py-1.5 text-[10px] leading-[12px] text-content-secondary dark:text-content-secondary\">\n No hay opciones disponibles\n </div>\n )}\n\n {/* Options */}\n {options.map((option, index) => (\n <div\n key={option.value}\n className={getMenuItemClasses(option, index)}\n onClick={() => handleSelect(option)}\n onMouseEnter={() => setFocusedIndex(index)}\n role=\"option\"\n aria-selected={option.value === selectedValue}\n aria-disabled={option.disabled}\n >\n {/* Check icon for selected item */}\n <div className=\"w-4 flex items-center justify-center\">\n {option.value === selectedValue && <CheckIcon className={checkIconClasses} />}\n </div>\n\n {/* Custom icon if provided */}\n {option.icon && <span className=\"shrink-0 w-4 h-4\">{option.icon}</span>}\n\n {/* Label */}\n <span className=\"flex-1 text-left\">{option.label}</span>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n","import React, { useState } from 'react';\nimport type {\n TableProps,\n TableHeaderProps,\n TableCellProps,\n SortDirection,\n PaginationProps,\n} from './Table.types';\n\n/**\n * Iconos para sort\n */\nconst ChevronUpIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"transition-transform\"\n >\n <path\n d=\"M12 10L8 6L4 10\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ChevronDownIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"transition-transform\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * Iconos para paginación\n */\nconst ArrowLeftIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 8H2M2 8L6.5 3.5M2 8L6.5 12.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ArrowRightIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2 8H14M14 8L9.5 3.5M14 8L9.5 12.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * TableHeader - Componente para el header de una columna\n */\nconst TableHeader = <T,>({\n column,\n sortable,\n sorted,\n sortDirection,\n onSort,\n}: TableHeaderProps<T>) => {\n // Clases base del header\n const baseClasses = `\n flex\n items-center\n gap-3\n px-6\n py-2.5\n min-h-[40px]\n border-b\n border-border-primary\n dark:border-dark-border-primary\n transition-colors\n duration-150\n `;\n\n // Clases según sortable\n const sortableClasses = sortable\n ? `\n cursor-pointer\n hover:bg-background-secondary\n dark:hover:bg-dark-bg-primary/50\n select-none\n `\n : '';\n\n // Clases de alineación\n const alignClasses = {\n left: 'justify-start',\n center: 'justify-center',\n right: 'justify-end',\n };\n\n const combinedClasses = [baseClasses, sortableClasses, alignClasses[column.align || 'left']]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div\n className={combinedClasses}\n onClick={sortable ? onSort : undefined}\n role={sortable ? 'button' : undefined}\n tabIndex={sortable ? 0 : undefined}\n onKeyDown={\n sortable\n ? (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onSort();\n }\n }\n : undefined\n }\n style={{ width: column.width }}\n >\n {/* Texto del header */}\n <span\n className=\"\n text-sm\n font-bold\n text-content-secondary\n dark:text-content-secondary\n text-ellipsis\n overflow-hidden\n whitespace-nowrap\n \"\n >\n {column.header}\n </span>\n\n {/* Iconos de sort */}\n {sortable && (\n <span className=\"shrink-0 text-content-secondary dark:text-content-secondary\">\n {sorted && sortDirection === 'asc' && <ChevronUpIcon />}\n {sorted && sortDirection === 'desc' && <ChevronDownIcon />}\n {!sorted && (\n <div className=\"w-4 h-4\" />\n )}\n </span>\n )}\n </div>\n );\n};\n\n/**\n * TableCell - Componente para una celda de datos\n */\nconst TableCell: React.FC<TableCellProps & { isStriped?: boolean; rowIndex?: number }> = ({\n children,\n align = 'left',\n width,\n isStriped = false,\n rowIndex = 0,\n}) => {\n // Clases de alineación\n const alignClasses = {\n left: 'justify-start text-left',\n center: 'justify-center text-center',\n right: 'justify-end text-right',\n };\n\n // Fondo zebra striping (filas pares tienen fondo)\n const stripedBg = isStriped && rowIndex % 2 === 1\n ? 'bg-background-secondary dark:bg-dark-bg-primary/30'\n : '';\n\n return (\n <div\n className={`\n flex\n flex-col\n ${alignClasses[align]}\n px-6\n py-4\n min-h-[56px]\n border-b\n border-border-secondary\n dark:border-dark-border-primary\n ${stripedBg}\n `}\n style={{ width }}\n >\n <span\n className=\"\n text-sm\n text-content-primary\n dark:text-dark-content-primary\n text-ellipsis\n overflow-hidden\n w-full\n \"\n >\n {children}\n </span>\n </div>\n );\n};\n\n\n/**\n * Pagination - Componente de paginación\n */\nconst Pagination: React.FC<PaginationProps> = ({\n currentPage,\n totalPages,\n onPageChange,\n previousLabel = 'Anterior',\n nextLabel = 'Siguiente',\n}) => {\n // Generar array de números de página para mostrar\n const getPageNumbers = () => {\n const pages: (number | string)[] = [];\n const maxVisible = 7; // Máximo de botones visibles\n\n if (totalPages <= maxVisible) {\n // Si hay pocas páginas, mostrar todas\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i);\n }\n } else {\n // Lógica para mostrar: 1 2 3 ... 65 66\n pages.push(1);\n\n if (currentPage <= 3) {\n pages.push(2, 3);\n } else if (currentPage >= totalPages - 2) {\n pages.push('...');\n pages.push(totalPages - 2, totalPages - 1);\n } else {\n pages.push('...');\n pages.push(currentPage);\n pages.push('...');\n }\n\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n }\n\n return pages;\n };\n\n const pageNumbers = getPageNumbers();\n\n return (\n <div className=\"flex items-center justify-between w-full h-9\">\n {/* Botón Anterior */}\n <button\n onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}\n disabled={currentPage === 1}\n className=\"\n flex\n items-center\n gap-3\n px-3\n py-2\n rounded-md\n text-sm\n font-bold\n text-primary-custom-600\n dark:text-primary-custom-600\n hover:bg-blue-50\n dark:hover:bg-blue-900/20\n disabled:opacity-50\n disabled:cursor-not-allowed\n transition-colors\n duration-150\n \"\n >\n <ArrowLeftIcon />\n <span>{previousLabel}</span>\n </button>\n\n {/* Números de página */}\n <div className=\"flex items-center gap-0\">\n {pageNumbers.map((page, index) => {\n if (page === '...') {\n return (\n <div\n key={`ellipsis-${index}`}\n className=\"\n flex\n items-center\n justify-center\n px-3\n py-2\n text-sm\n font-bold\n text-primary-custom-600\n dark:text-primary-custom-600\n \"\n >\n {page}\n </div>\n );\n }\n\n const isActive = page === currentPage;\n\n return (\n <button\n key={page}\n onClick={() => onPageChange(page as number)}\n className={`\n flex\n items-center\n justify-center\n px-3\n py-2\n rounded-md\n text-sm\n font-bold\n text-primary-custom-600\n dark:text-primary-custom-600\n transition-colors\n duration-150\n ${\n isActive\n ? 'bg-blue-100 dark:bg-blue-900/30'\n : 'hover:bg-blue-50 dark:hover:bg-blue-900/20'\n }\n `}\n >\n {page}\n </button>\n );\n })}\n </div>\n\n {/* Botón Siguiente */}\n <button\n onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}\n disabled={currentPage === totalPages}\n className=\"\n flex\n items-center\n gap-3\n px-3\n py-2\n rounded-md\n text-sm\n font-bold\n text-primary-custom-600\n dark:text-primary-custom-600\n hover:bg-blue-50\n dark:hover:bg-blue-900/20\n disabled:opacity-50\n disabled:cursor-not-allowed\n transition-colors\n duration-150\n \"\n >\n <span>{nextLabel}</span>\n <ArrowRightIcon />\n </button>\n </div>\n );\n};\n\n/**\n * Table - Componente principal de tabla\n *\n * Características implementadas:\n * - Definición de columnas flexible con accessor y render custom\n * - Sorting en columnas (controlado o no controlado)\n * - Variantes: basic, fullWidth, striped, grid\n * - Dark mode completo en todos los estados\n * - Estados de loading y empty\n * - Filas clickeables\n * - Accesibilidad con roles y keyboard navigation\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto y generics\n * - Accesibilidad con ARIA labels y keyboard support\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label/Small para headers, Paragraph/Small para cells)\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/shadows.md - Sistema de sombras\n *\n * @example\n * ```tsx\n * // Uso básico\n * <Table\n * title=\"Usuarios\"\n * columns={[\n * { header: 'Nombre', accessor: 'name' },\n * { header: 'Email', accessor: 'email' },\n * { header: 'Rol', accessor: 'role', sortable: true },\n * ]}\n * data={users}\n * />\n *\n * // Con render custom\n * <Table\n * columns={[\n * {\n * header: 'Estado',\n * accessor: 'status',\n * render: (value) => (\n * <Badge color={value === 'active' ? 'green' : 'red'}>\n * {value}\n * </Badge>\n * ),\n * },\n * ]}\n * data={data}\n * />\n *\n * // Variante striped\n * <Table\n * variant=\"striped\"\n * columns={columns}\n * data={data}\n * />\n * ```\n */\nexport const Table = <T extends Record<string, any>>({\n title,\n columns,\n data,\n variant = 'basic',\n showBorder = true,\n showShadow = true,\n // onRowClick, // TODO: Implement row click functionality\n onSort,\n sortColumn: externalSortColumn,\n sortDirection: externalSortDirection,\n fullWidth = false,\n emptyMessage = 'No hay datos disponibles',\n loading = false,\n loadingRows = 5,\n pagination,\n className = '',\n id,\n}: TableProps<T>) => {\n // ===== ESTADO INTERNO DE SORT =====\n const [internalSortColumn, setInternalSortColumn] = useState<keyof T | string | null>(null);\n const [internalSortDirection, setInternalSortDirection] = useState<SortDirection>(null);\n\n // Usar sort externo si está controlado, sino usar interno\n const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;\n const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;\n\n // ===== MANEJAR SORT =====\n const handleSort = (columnAccessor: keyof T | string) => {\n let newDirection: SortDirection = 'asc';\n\n // Si ya está ordenado por esta columna, cambiar dirección\n if (sortColumn === columnAccessor) {\n if (sortDirection === 'asc') {\n newDirection = 'desc';\n } else if (sortDirection === 'desc') {\n newDirection = null;\n }\n }\n\n // Si sort es controlado, llamar callback\n if (onSort) {\n onSort(columnAccessor, newDirection);\n } else {\n // Sino, actualizar estado interno\n setInternalSortColumn(newDirection ? columnAccessor : null);\n setInternalSortDirection(newDirection);\n }\n };\n\n // ===== OBTENER VALOR DE CELDA =====\n const getCellValue = (row: T, accessor: keyof T | ((row: T) => any)) => {\n if (typeof accessor === 'function') {\n return accessor(row);\n }\n return row[accessor];\n };\n\n // ===== CLASES DEL CONTAINER =====\n const containerBaseClasses = `\n flex\n flex-col\n gap-4\n bg-white\n dark:bg-dark-bg-primary\n rounded-xl\n transition-all\n duration-150\n `;\n\n const containerBorderClasses = showBorder\n ? 'border border-border-primary dark:border-dark-border-primary'\n : '';\n\n const containerShadowClasses = showShadow ? 'shadow-base' : '';\n\n const containerPaddingClasses = 'p-8';\n\n const containerWidthClasses = fullWidth || variant === 'fullWidth' ? 'w-full' : '';\n\n const containerClasses = [\n containerBaseClasses,\n containerBorderClasses,\n containerShadowClasses,\n containerPaddingClasses,\n containerWidthClasses,\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DE LA TABLA =====\n const tableGridClasses = variant === 'grid'\n ? `\n border\n border-border-primary\n dark:border-dark-border-primary\n rounded-lg\n overflow-hidden\n `\n : '';\n\n // ===== RENDER =====\n return (\n <div className={containerClasses} id={id}>\n {/* Título opcional */}\n {title && (\n <div className=\"flex items-center justify-center w-full\">\n <h3\n className=\"\n text-base\n font-bold\n text-content-primary\n dark:text-dark-content-primary\n text-ellipsis\n overflow-hidden\n whitespace-nowrap\n \"\n >\n {title}\n </h3>\n </div>\n )}\n\n {/* Tabla */}\n <div className={`flex w-full overflow-x-auto ${tableGridClasses}`}>\n {/* Columnas */}\n {columns.map((column, colIndex) => {\n const accessor = typeof column.accessor === 'function'\n ? `column_${colIndex}`\n : String(column.accessor);\n\n return (\n <div key={accessor} className=\"flex flex-col flex-1 min-w-0\">\n {/* Header de la columna */}\n <TableHeader\n column={column}\n sortable={column.sortable || false}\n sorted={sortColumn === accessor}\n sortDirection={sortColumn === accessor ? sortDirection : null}\n onSort={() => handleSort(accessor)}\n />\n\n {/* Loading skeleton */}\n {loading && (\n <>\n {Array.from({ length: loadingRows }).map((_, rowIndex) => (\n <TableCell\n key={`loading-${rowIndex}`}\n align={column.align}\n width={column.width}\n isStriped={variant === 'striped'}\n rowIndex={rowIndex}\n >\n <div\n className=\"\n h-4\n bg-background-secondary\n dark:bg-dark-border-primary\n rounded\n animate-pulse\n \"\n />\n </TableCell>\n ))}\n </>\n )}\n\n {/* Datos reales */}\n {!loading && data.length > 0 && (\n <>\n {data.map((row, rowIndex) => {\n const value = getCellValue(row, column.accessor);\n const content = column.render\n ? column.render(value, row, rowIndex)\n : value;\n\n return (\n <TableCell\n key={rowIndex}\n align={column.align}\n width={column.width}\n isStriped={variant === 'striped'}\n rowIndex={rowIndex}\n >\n {content}\n </TableCell>\n );\n })}\n </>\n )}\n\n {/* Estado empty */}\n {!loading && data.length === 0 && colIndex === 0 && (\n <div\n className=\"\n flex\n items-center\n justify-center\n px-6\n py-12\n text-sm\n text-content-secondary\n dark:text-content-secondary\n \"\n style={{ gridColumn: `1 / ${columns.length + 1}` }}\n >\n {emptyMessage}\n </div>\n )}\n </div>\n );\n })}\n </div>\n\n {/* Paginación */}\n {pagination && (\n <Pagination\n currentPage={pagination.currentPage}\n totalPages={pagination.totalPages}\n onPageChange={pagination.onPageChange}\n previousLabel={pagination.previousLabel}\n nextLabel={pagination.nextLabel}\n />\n )}\n </div>\n );\n};\n","import React, { useState } from 'react';\nimport type { TabProps, TabsProps } from './Tabs.types';\n\n/**\n * Componente Tab individual del sistema de diseño Siesa\n *\n * Representa un único tab dentro de un grupo de tabs. Incluye soporte para:\n * - Estado activo/inactivo con indicador visual (línea inferior)\n * - Icono opcional a la izquierda del texto\n * - Badge de notificación con contador\n * - Estados hover, focus y disabled\n * - Dark mode completo\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Tab\n * label=\"Inicio\"\n * active={true}\n * icon={<HomeIcon />}\n * badge={3}\n * onClick={() => setActiveTab('home')}\n * />\n * ```\n */\nexport const Tab: React.FC<TabProps> = ({\n label,\n active = false,\n icon,\n badge,\n disabled = false,\n onClick,\n className = '',\n ariaLabel,\n}) => {\n // ===== CLASES BASE DEL BOTÓN =====\n // El contenedor es relativo para posicionar el indicador absoluto\n const baseClasses = `\n relative\n flex\n flex-col\n items-center\n cursor-pointer\n outline-hidden\n transition-all\n duration-150\n p-0\n border-0\n bg-transparent\n `;\n\n // ===== CLASES DE FOCUS =====\n // El focus outline se desactiva aquí, el shadow se aplica al Content div\n const focusClasses = '';\n\n // ===== CLASES DE DISABLED =====\n const disabledClasses = disabled\n ? 'opacity-50 cursor-not-allowed pointer-events-none'\n : '';\n\n // ===== CLASES DEL CONTENIDO INTERIOR =====\n // El hover y focus background se aplica aquí\n const contentBaseClasses = `\n flex\n items-center\n justify-center\n gap-1\n p-2\n rounded-lg\n overflow-hidden\n transition-all\n duration-150\n w-full\n `;\n\n // ===== CLASES DE ESTADO HOVER Y FOCUS PARA CONTENIDO =====\n // Light: bg-[rgba(0,0,0,0.03)], Dark: bg-white/5\n // Según Figma, tanto hover como focus tienen el background overlay\n // El shadow de focus también se aplica aquí (al Content div), no al botón\n const contentStateClasses = disabled\n ? ''\n : `\n group-hover:bg-[rgba(0,0,0,0.03)]\n group-focus-visible:bg-[rgba(0,0,0,0.03)]\n group-focus-visible:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n dark:group-hover:bg-white/5\n dark:group-focus-visible:bg-white/5\n dark:group-focus-visible:shadow-[0px_0px_0px_2px_#1e3a5f,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#0f6ae3]\n `;\n\n // ===== CLASES DE TEXTO =====\n // Activo: primary-custom-600 (#0e79fd), Inactivo: content-primary (#18181b)\n const textClasses = active\n ? `\n text-primary-custom-600\n dark:text-primary-custom-600\n `\n : `\n text-content-primary\n dark:text-dark-content-primary\n `;\n\n // ===== CLASES DE ICONO =====\n // El icono hereda el color del texto\n const iconClasses = `\n w-3\n h-3\n shrink-0\n `;\n\n // ===== CLASES DEL BADGE =====\n // Activo: bg-primary-custom-600 (#0e79fd), Inactivo: bg-content-primary (#18181b)\n const badgeClasses = active\n ? `\n bg-primary-custom-600\n dark:bg-primary-custom-600\n `\n : `\n bg-content-primary\n dark:bg-dark-content-primary\n `;\n\n // ===== CLASES DEL INDICADOR INFERIOR =====\n // Solo visible cuando está activo, 2px de alto, rounded-full\n // Posicionado al fondo del contenedor de Tabs (alineado con el border)\n const indicatorClasses = active\n ? `\n absolute\n -bottom-2.5\n left-0\n right-0\n h-0.5\n rounded-full\n bg-primary-custom-600\n dark:bg-primary-custom-600\n z-10\n `\n : 'hidden';\n\n // ===== COMBINAR CLASES DEL BOTÓN =====\n const finalClasses = [\n baseClasses,\n focusClasses,\n disabledClasses,\n 'group', // Para usar group-hover y group-focus-visible\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== COMBINAR CLASES DEL CONTENIDO =====\n const contentFinalClasses = [\n contentBaseClasses,\n contentStateClasses,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type=\"button\"\n role=\"tab\"\n aria-selected={active}\n aria-disabled={disabled}\n aria-label={ariaLabel || label}\n tabIndex={disabled ? -1 : 0}\n className={finalClasses}\n onClick={disabled ? undefined : onClick}\n disabled={disabled}\n >\n {/* Contenido del Tab */}\n <div className={contentFinalClasses}>\n {/* Icono (opcional) */}\n {icon && (\n <span className={`${iconClasses} ${textClasses}`.trim()}>\n {icon}\n </span>\n )}\n\n {/* Texto */}\n <span\n className={`\n text-sm\n font-bold\n leading-5\n whitespace-nowrap\n ${textClasses}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {label}\n </span>\n\n {/* Badge de notificación (opcional) */}\n {badge !== undefined && badge > 0 && (\n <span\n className={`\n flex\n items-center\n justify-center\n h-3\n min-w-[12px]\n px-0.5\n rounded-xs\n text-xs\n font-normal\n leading-4\n text-primary-inverse-content\n dark:text-dark-bg-primary\n ${badgeClasses}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n aria-label={`${badge} notificaciones`}\n >\n {badge > 99 ? '99+' : badge}\n </span>\n )}\n </div>\n\n {/* Indicador inferior (línea activa) */}\n <div className={indicatorClasses} />\n </button>\n );\n};\n\n/**\n * Componente Tabs contenedor del sistema de diseño Siesa\n *\n * Agrupa múltiples tabs permitiendo navegación entre diferentes secciones.\n * Soporta modo controlado (con activeId y onChange) y no controlado (con defaultActiveId).\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA roles y keyboard navigation\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Modo controlado\n * const [activeTab, setActiveTab] = useState('home');\n *\n * <Tabs\n * items={[\n * { id: 'home', label: 'Inicio', icon: <HomeIcon /> },\n * { id: 'profile', label: 'Perfil', badge: 3 },\n * { id: 'settings', label: 'Configuración' },\n * ]}\n * activeId={activeTab}\n * onChange={setActiveTab}\n * />\n *\n * // Modo no controlado\n * <Tabs\n * items={[...]}\n * defaultActiveId=\"home\"\n * />\n * ```\n */\nexport const Tabs: React.FC<TabsProps> = ({\n items,\n activeId,\n defaultActiveId,\n onChange,\n className = '',\n fullWidth = false,\n size = 'base',\n showBorder = true,\n}) => {\n // Estado interno para modo no controlado\n const [internalActiveId, setInternalActiveId] = useState(\n defaultActiveId || (items.length > 0 ? items[0].id : '')\n );\n\n // Determinar si es controlado o no controlado\n const isControlled = activeId !== undefined;\n const currentActiveId = isControlled ? activeId : internalActiveId;\n\n // Handler para cambio de tab\n const handleTabClick = (id: string) => {\n if (!isControlled) {\n setInternalActiveId(id);\n }\n onChange?.(id);\n };\n\n // ===== CLASES DE TAMAÑO =====\n const sizeClasses = {\n sm: 'gap-0',\n base: 'gap-1',\n lg: 'gap-2',\n };\n\n // ===== CLASES DEL CONTENEDOR =====\n // El padding-bottom (pb-2.5 = 10px) deja espacio para el indicador del tab activo\n // El border-b se dibuja debajo del padding, alineándose con el indicador\n const containerClasses = `\n flex\n items-end\n pb-2.5\n ${sizeClasses[size]}\n ${fullWidth ? 'w-full' : ''}\n ${showBorder ? 'border-b border-border-primary dark:border-dark-border-primary' : ''}\n `;\n\n // ===== CLASES FULL WIDTH PARA ITEMS =====\n const itemWidthClass = fullWidth ? 'flex-1' : '';\n\n const finalClasses = [\n containerClasses,\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div\n role=\"tablist\"\n aria-label=\"Pestañas de navegación\"\n className={finalClasses}\n >\n {items.map((item) => (\n <Tab\n key={item.id}\n label={item.label}\n active={currentActiveId === item.id}\n icon={item.icon}\n badge={item.badge}\n disabled={item.disabled}\n onClick={() => handleTabClick(item.id)}\n className={itemWidthClass}\n />\n ))}\n </div>\n );\n};\n","/**\n * Iconos para el componente Navbar\n * Basados en Heroicons Micro (16x16px)\n */\n\nexport const ShoppingCartIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path d=\"M1.75 1.002a.75.75 0 1 0 0 1.5h1.035l1.38 5.514a2.75 2.75 0 0 0 2.658 2.048h5.355a2.75 2.75 0 0 0 2.658-2.048l.9-3.597a.75.75 0 0 0-.728-.919H4.655l-.22-.88A.75.75 0 0 0 3.71 2H1.75ZM5 13a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM11.5 13a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z\" />\n </svg>\n);\n\nexport const BellIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const MagnifyingGlassIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const ChevronDownIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const ExclamationTriangleIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 7.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const NotificationDot = () => (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n </svg>\n);\n\nexport const ArrowLeftStartOnRectangleIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M14 4.75A2.75 2.75 0 0 0 11.25 2h-3A2.75 2.75 0 0 0 5.5 4.75v.5a.75.75 0 0 0 1.5 0v-.5c0-.69.56-1.25 1.25-1.25h3c.69 0 1.25.56 1.25 1.25v6.5c0 .69-.56 1.25-1.25 1.25h-3c-.69 0-1.25-.56-1.25-1.25v-.5a.75.75 0 0 0-1.5 0v.5A2.75 2.75 0 0 0 8.25 14h3A2.75 2.75 0 0 0 14 11.25v-6.5Zm-9.47.47a.75.75 0 0 0-1.06 0L1.22 7.47a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06l-.97-.97h5.69a.75.75 0 0 0 0-1.5H3.56l.97-.97a.75.75 0 0 0 0-1.06Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { NavbarProps } from './Navbar.types';\nimport { Badge } from '../Badge/Badge';\nimport {\n ShoppingCartIcon,\n BellIcon,\n MagnifyingGlassIcon,\n ChevronDownIcon,\n ExclamationTriangleIcon,\n ArrowLeftStartOnRectangleIcon,\n} from './icons';\n\n/**\n * Componente Navbar del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Barra de navegación principal con soporte completo para responsive y dark mode.\n * Incluye logo, nombre de producto, badge de ambiente, botones de acción y dropdown de usuario.\n *\n * **Variantes de dispositivo:**\n * - `responsive`: Se adapta automáticamente al viewport (por defecto)\n * - `desktop`: Versión completa (1360x64px) con todos los elementos\n * - `tablet`: Versión tablet (1024x64px) con elementos reducidos\n * - `mobile`: Versión simplificada (428x40px) con logo icono y avatar circular\n *\n * **Elementos incluidos:**\n * - Botón de navegación (solo desktop/tablet) - Usa shadow-button-inset\n * - Logo del negocio (solo desktop/tablet)\n * - Dividers verticales (solo desktop/tablet)\n * - Logo Siesa (completo en desktop/tablet, icono en mobile)\n * - Nombre del producto (solo desktop/tablet) - Heading/Tiny (20px Bold)\n * - Badge de ambiente con icono de advertencia (yellow)\n * - Botones de acción (search solo mobile, cart, notifications)\n * - Dropdown de usuario con avatar, nombre y email\n * - Logo Siesa trailing (solo desktop)\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación (NO colores hardcodeados)\n * - Focus rings adaptativos para light y dark mode\n * - Type safety con TypeScript estricto\n * - Responsive design con breakpoints md: y lg:\n * - Tipografía del sistema: Heading/Tiny, Paragraph/Small, Paragraph/Tiny\n * - Spacing del sistema (4px, 8px, 12px, 16px, 32px)\n *\n * @see docs/colors.md - Sistema de colores y tokens dark mode\n * @see docs/typography.md - Sistema tipográfico (Heading, Paragraph)\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/shadows.md - Sistema de sombras (button-inset)\n *\n * @example\n * ```tsx\n * <Navbar\n * productName=\"Mi Producto\"\n * environmentBadge=\"Ambiente de Pruebas\"\n * userDropdown={{\n * avatar: \"/path/to/avatar.jpg\",\n * name: \"Juan Pérez\",\n * email: \"juan@ejemplo.com\",\n * }}\n * notifications={{\n * cart: 99,\n * bell: true,\n * }}\n * onNavigationClick={() => router.back()}\n * onCartClick={() => openCart()}\n * onNotificationsClick={() => openNotifications()}\n * />\n * ```\n */\nexport const Navbar: React.FC<NavbarProps> = ({\n logo,\n productName = 'Nombre Producto',\n environmentBadge,\n userDropdown,\n actions,\n notifications,\n className = '',\n variant = 'responsive',\n hideActionButtons = false,\n leadingAction,\n siesaLogo,\n showBusinessLogo = false,\n showSiesaLogoLeading = true,\n showSiesaLogoTrailing = false,\n onNavigationClick,\n onSearchClick,\n onCartClick,\n onNotificationsClick,\n}) => {\n // ===== CLASES COMUNES PARA BOTONES DE ACCIÓN =====\n const actionButtonClasses = `\n box-border\n flex\n flex-col\n items-center\n justify-center\n p-1\n relative\n rounded-md\n shrink-0\n text-primary-custom-600\n hover:bg-background-secondary\n active:scale-95\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:text-primary-custom-600\n dark:hover:bg-dark-bg-secondary\n dark:active:scale-95\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n transition-all\n duration-150\n `;\n\n // ===== CLASES PARA BOTÓN DE NAVEGACIÓN PRIMARIO =====\n const navigationButtonClasses = `\n bg-primary-custom-600\n text-primary-inverse-content\n border\n border-primary-custom-600\n shadow-button-inset\n hover:bg-primary-custom-500\n active:scale-95\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:bg-dark-bg-inverse\n dark:text-dark-content-inverse\n dark:border-dark-bg-inverse\n dark:hover:bg-dark-bg-inverse/90\n dark:active:scale-95\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n box-border\n flex\n flex-col\n items-center\n justify-center\n p-3\n relative\n rounded-md\n shrink-0\n transition-all\n duration-150\n `;\n\n // ===== HELPER: Es mobile (variante o responsive en mobile breakpoint) =====\n const isMobile = variant === 'mobile';\n const isDesktop = variant === 'desktop';\n const isTablet = variant === 'tablet';\n const isResponsive = variant === 'responsive';\n\n // ===== BOTÓN DE NAVEGACIÓN =====\n const NavigationButton = () => {\n if (isMobile) return null;\n\n const buttonContent = (\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <ArrowLeftStartOnRectangleIcon />\n </div>\n );\n\n if (isDesktop || isTablet) {\n return (\n <button\n className={navigationButtonClasses}\n aria-label=\"Volver\"\n onClick={onNavigationClick}\n >\n {buttonContent}\n </button>\n );\n }\n\n // Responsive: Solo visible en md: y superiores\n return (\n <button\n className={`hidden md:flex ${navigationButtonClasses}`}\n aria-label=\"Volver\"\n onClick={onNavigationClick}\n >\n {buttonContent}\n </button>\n );\n };\n\n // ===== BUSINESS LOGO (Logo del cliente/producto) =====\n // Solo se muestra si showBusinessLogo es true\n const BusinessLogo = () => {\n if (isMobile || !showBusinessLogo) return null;\n\n const logoContent = (\n <img\n src=\"/,Business Logo.png\"\n alt=\"Business Logo\"\n className=\"w-full h-full object-contain\"\n />\n );\n\n if (isDesktop) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[168px] h-[30px]\">\n {logoContent}\n </div>\n );\n }\n\n if (isTablet) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[140px] h-[25px]\">\n {logoContent}\n </div>\n );\n }\n\n // Responsive: Visible en md: con tamaño desktop, lg: con tamaño completo\n return (\n <div className=\"hidden md:block overflow-hidden relative shrink-0 w-[140px] lg:w-[168px] h-[25px] lg:h-[30px]\">\n {logoContent}\n </div>\n );\n };\n\n // ===== SIESA LOGO (Logo de Siesa - Leading) =====\n // Se controla con showSiesaLogoLeading\n // En mobile siempre se muestra el icono de Siesa en leading\n const SiesaLogoLeading = () => {\n const logoFull = (\n <img\n src=\"/.Siesa Logo.png\"\n alt=\"Siesa\"\n className=\"w-full h-full object-contain\"\n />\n );\n\n const logoMobile = (\n <img\n src=\"/siesa_logo_mobile.png\"\n alt=\"Siesa\"\n className=\"w-full h-full object-contain\"\n />\n );\n\n // En mobile siempre se muestra el icono de Siesa\n if (isMobile) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[30px] h-[30px]\">\n {logoMobile}\n </div>\n );\n }\n\n // En desktop/tablet: Se controla con showSiesaLogoLeading\n if (!showSiesaLogoLeading) return null;\n\n if (isDesktop) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[120px] h-[30px]\">\n {logoFull}\n </div>\n );\n }\n\n if (isTablet) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[100px] h-[25px]\">\n {logoFull}\n </div>\n );\n }\n\n // Responsive\n return (\n <>\n {/* Mobile: Logo icono (30x30) - siempre visible */}\n <div className=\"md:hidden overflow-hidden relative shrink-0 w-[30px] h-[30px]\">\n {logoMobile}\n </div>\n {/* Tablet/Desktop: Se controla con showSiesaLogoLeading */}\n {showSiesaLogoLeading && (\n <>\n {/* Tablet: Logo completo (100x25) */}\n <div className=\"hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]\">\n {logoFull}\n </div>\n {/* Desktop: Logo completo (120x30) */}\n <div className=\"hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]\">\n {logoFull}\n </div>\n </>\n )}\n </>\n );\n };\n\n // ===== SIESA LOGO (Trailing) =====\n // Se controla con showSiesaLogoTrailing\n const SiesaLogoTrailing = () => {\n // Se controla con showSiesaLogoTrailing\n if (!showSiesaLogoTrailing || isMobile) return null;\n\n const logoFull = (\n <img\n src=\"/.Siesa Logo.png\"\n alt=\"Siesa\"\n className=\"w-full h-full object-contain\"\n />\n );\n\n if (isDesktop) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[120px] h-[30px]\">\n {logoFull}\n </div>\n );\n }\n\n if (isTablet) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[100px] h-[25px]\">\n {logoFull}\n </div>\n );\n }\n\n // Responsive: Visible en md: (tablet y desktop)\n return (\n <>\n {/* Tablet: Logo completo (100x25) */}\n <div className=\"hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]\">\n {logoFull}\n </div>\n {/* Desktop: Logo completo (120x30) */}\n <div className=\"hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]\">\n {logoFull}\n </div>\n </>\n );\n };\n\n // ===== DIVIDER COMPONENT =====\n const Divider = ({ responsive = true }: { responsive?: boolean }) => {\n const dividerContent = (\n <div className=\"grow shrink-0 w-px min-h-px bg-border-primary dark:bg-dark-border-primary\" />\n );\n\n if (isMobile) return null;\n\n if (isDesktop || isTablet) {\n return (\n <div className=\"flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0\">\n {dividerContent}\n </div>\n );\n }\n\n // Responsive\n if (responsive) {\n return (\n <div className=\"hidden md:flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0\">\n {dividerContent}\n </div>\n );\n }\n\n return null;\n };\n\n // ===== PRODUCT NAME =====\n const ProductName = () => {\n if (isMobile || !productName) return null;\n\n const nameContent = (\n <p className=\"font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap\">\n {productName}\n </p>\n );\n\n if (isDesktop || isTablet) {\n return nameContent;\n }\n\n // Responsive: Solo visible en md:\n return (\n <p className=\"hidden md:block font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap\">\n {productName}\n </p>\n );\n };\n\n // ===== ENVIRONMENT BADGE =====\n const EnvironmentBadge = () => {\n if (!environmentBadge) return null;\n\n if (isMobile) {\n return (\n <Badge\n color=\"yellow\"\n leftIcon={<ExclamationTriangleIcon />}\n label=\"Pruebas\"\n />\n );\n }\n\n if (isDesktop || isTablet) {\n return (\n <Badge\n color=\"yellow\"\n leftIcon={<ExclamationTriangleIcon />}\n label={environmentBadge}\n />\n );\n }\n\n // Responsive: Mostrar badge corto en mobile, completo en desktop\n return (\n <>\n <div className=\"md:hidden\">\n <Badge\n color=\"yellow\"\n leftIcon={<ExclamationTriangleIcon />}\n label=\"Pruebas\"\n />\n </div>\n <div className=\"hidden md:block\">\n <Badge\n color=\"yellow\"\n leftIcon={<ExclamationTriangleIcon />}\n label={environmentBadge}\n />\n </div>\n </>\n );\n };\n\n // ===== SEARCH BUTTON (Solo mobile) =====\n const SearchButton = () => {\n if (hideActionButtons) return null;\n\n if (isMobile) {\n return (\n <button\n className={actionButtonClasses}\n aria-label=\"Buscar\"\n onClick={onSearchClick}\n >\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <MagnifyingGlassIcon />\n </div>\n </button>\n );\n }\n\n if (isResponsive) {\n return (\n <button\n className={`md:hidden ${actionButtonClasses}`}\n aria-label=\"Buscar\"\n onClick={onSearchClick}\n >\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <MagnifyingGlassIcon />\n </div>\n </button>\n );\n }\n\n return null;\n };\n\n // ===== CART BUTTON =====\n const CartButton = () => {\n if (hideActionButtons) return null;\n\n return (\n <div className=\"relative\">\n <button\n className={actionButtonClasses}\n aria-label=\"Carrito de compras\"\n onClick={onCartClick}\n >\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <ShoppingCartIcon />\n </div>\n </button>\n {/* Badge de notificación con número */}\n {notifications?.cart !== undefined && notifications.cart > 0 && (\n <div className=\"absolute bg-error-content dark:bg-error-content flex flex-col gap-2.5 h-4 items-center justify-center left-[calc(50%+8px)] px-1 py-0 rounded-full top-[calc(50%-8px)] -translate-x-1/2 -translate-y-1/2 pointer-events-none min-w-[16px]\">\n <p className=\"font-bold leading-3 text-[10px] text-white text-center whitespace-nowrap\">\n {notifications.cart > 99 ? '+99' : notifications.cart}\n </p>\n </div>\n )}\n </div>\n );\n };\n\n // ===== NOTIFICATIONS BUTTON =====\n const NotificationsButton = () => {\n if (hideActionButtons) return null;\n\n return (\n <div className=\"relative\">\n <button\n className={actionButtonClasses}\n aria-label=\"Notificaciones\"\n onClick={onNotificationsClick}\n >\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <BellIcon />\n </div>\n </button>\n {/* Badge de notificación dot */}\n {notifications?.bell && (\n <div className=\"absolute w-2 h-2 bg-error-content dark:bg-error-content rounded-full left-[calc(50%+4px)] top-[calc(50%-8px)] -translate-x-1/2 pointer-events-none\" />\n )}\n </div>\n );\n };\n\n // ===== USER DROPDOWN =====\n const UserDropdown = () => {\n if (!userDropdown) return null;\n\n const dropdownButtonClasses = `\n box-border\n flex\n items-center\n justify-center\n overflow-hidden\n p-0\n relative\n shrink-0\n hover:bg-background-secondary\n active:scale-95\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:hover:bg-dark-bg-secondary\n dark:active:scale-95\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n rounded-lg\n transition-all\n duration-150\n `;\n\n // Mobile: Solo avatar circular\n if (isMobile) {\n return (\n <button\n className={dropdownButtonClasses}\n onClick={userDropdown.onMenuClick}\n aria-label=\"Menú de usuario\"\n >\n <div className=\"relative rounded-full shrink-0 w-8 h-8\">\n <img\n alt={userDropdown.name}\n className=\"absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full\"\n src={userDropdown.avatar}\n />\n </div>\n </button>\n );\n }\n\n // Desktop/Tablet: Avatar + info + chevron\n const renderFullDropdown = () => (\n <button\n className={dropdownButtonClasses}\n onClick={userDropdown.onMenuClick}\n aria-label=\"Menú de usuario\"\n >\n <div className=\"box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0\">\n <div className=\"flex gap-3 items-center justify-center relative shrink-0\">\n {/* Avatar */}\n <div className=\"flex items-center justify-center relative shrink-0\">\n <div className=\"relative rounded-md shrink-0 w-10 h-10\">\n <img\n alt={userDropdown.name}\n className=\"absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full\"\n src={userDropdown.avatar}\n />\n </div>\n </div>\n {/* Nombre y email/rol */}\n <div className=\"flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]\">\n <p className=\"leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal\">\n {userDropdown.name}\n </p>\n {(userDropdown.email || userDropdown.role) && (\n <p className=\"leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis\">\n {userDropdown.email || userDropdown.role}\n </p>\n )}\n </div>\n </div>\n {/* Chevron down icon */}\n <div className=\"overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary\">\n <ChevronDownIcon />\n </div>\n </div>\n </button>\n );\n\n if (isDesktop || isTablet) {\n return renderFullDropdown();\n }\n\n // Responsive\n return (\n <>\n {/* Mobile: Solo avatar circular */}\n <button\n className={`md:hidden ${dropdownButtonClasses}`}\n onClick={userDropdown.onMenuClick}\n aria-label=\"Menú de usuario\"\n >\n <div className=\"relative rounded-full shrink-0 w-8 h-8\">\n <img\n alt={userDropdown.name}\n className=\"absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full\"\n src={userDropdown.avatar}\n />\n </div>\n </button>\n {/* Desktop/Tablet: Avatar + info + chevron */}\n <button\n className={`hidden md:flex ${dropdownButtonClasses}`}\n onClick={userDropdown.onMenuClick}\n aria-label=\"Menú de usuario\"\n >\n <div className=\"box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0\">\n <div className=\"flex gap-3 items-center justify-center relative shrink-0\">\n {/* Avatar */}\n <div className=\"flex items-center justify-center relative shrink-0\">\n <div className=\"relative rounded-md shrink-0 w-10 h-10\">\n <img\n alt={userDropdown.name}\n className=\"absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full\"\n src={userDropdown.avatar}\n />\n </div>\n </div>\n {/* Nombre y email/rol */}\n <div className=\"flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]\">\n <p className=\"leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal\">\n {userDropdown.name}\n </p>\n {(userDropdown.email || userDropdown.role) && (\n <p className=\"leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis\">\n {userDropdown.email || userDropdown.role}\n </p>\n )}\n </div>\n </div>\n {/* Chevron down icon */}\n <div className=\"overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary\">\n <ChevronDownIcon />\n </div>\n </div>\n </button>\n </>\n );\n };\n\n // ===== CLASES BASE DEL NAVBAR =====\n const baseClasses = `\n box-border\n flex\n gap-8\n items-center\n px-4\n py-1\n relative\n w-full\n bg-background-primary\n dark:bg-dark-bg-primary\n `;\n\n // ===== CLASES PARA VARIANTES DE ALTURA =====\n const variantClasses = {\n responsive: 'h-[40px] md:h-16',\n desktop: 'h-16',\n tablet: 'h-16',\n mobile: 'h-[40px]',\n };\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [baseClasses, variantClasses[variant], className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <nav className={finalClasses}>\n {/* ===== SECCIÓN LEADING (IZQUIERDA) ===== */}\n <div className=\"flex gap-4 items-center relative shrink-0\">\n {/* Botón de navegación o acción leading personalizada (solo desktop/tablet) */}\n {!isMobile && (leadingAction || <NavigationButton />)}\n\n {/* Business Logo (logo del cliente) - solo cuando showBusinessLogo=true */}\n {logo || <BusinessLogo />}\n\n {/* Divider después de Business Logo - Solo cuando hay Business Logo Y hay Siesa Logo en leading */}\n {showBusinessLogo && showSiesaLogoLeading && !isMobile && <Divider />}\n\n {/* Siesa Logo en leading - Se controla con showSiesaLogoLeading */}\n {siesaLogo || <SiesaLogoLeading />}\n\n {/* Divider antes del nombre - Solo cuando hay Siesa Logo en leading y nombre de producto */}\n {productName && showSiesaLogoLeading && !isMobile && <Divider />}\n\n {/* Nombre del Producto - Solo desktop/tablet */}\n <ProductName />\n </div>\n\n {/* ===== SECCIÓN TRAILING (DERECHA) ===== */}\n <div className=\"flex gap-4 items-center justify-end grow min-h-px min-w-px relative shrink-0\">\n {/* Badge de Ambiente */}\n <EnvironmentBadge />\n\n {/* Botón de búsqueda - Solo mobile */}\n <SearchButton />\n\n {/* Botón de carrito de compras */}\n <CartButton />\n\n {/* Botón de notificaciones */}\n <NotificationsButton />\n\n {/* Divider antes del dropdown - Solo desktop/tablet */}\n {userDropdown && !hideActionButtons && <Divider />}\n\n {/* Dropdown de usuario */}\n <UserDropdown />\n\n {/* Divider antes del logo Siesa trailing - Solo cuando showSiesaLogoTrailing=true */}\n {showSiesaLogoTrailing && userDropdown && !isMobile && <Divider />}\n\n {/* Logo Siesa trailing - Solo desktop */}\n <SiesaLogoTrailing />\n\n {/* Actions adicionales */}\n {actions && <div className=\"flex gap-2 items-center\">{actions}</div>}\n </div>\n </nav>\n );\n};\n","import React from 'react';\nimport type { NavigationBarProps, NavigationBarItem } from './NavigationBar.types';\n\n/**\n * NavigationBar del sistema de diseño Siesa\n *\n * **Componente de navegación inferior (Bottom Navigation Bar) para móvil.**\n * Permite al usuario navegar entre vistas principales de la aplicación.\n * Diseñado para contener 3-5 ítems de navegación.\n *\n * **🔄 Navegación Responsive:**\n * El NavigationRail (navegación lateral vertical) se convierte en NavigationBar\n * (navegación inferior horizontal) cuando la pantalla es móvil. Esta es una\n * práctica recomendada de UX para aprovechar mejor el espacio en diferentes\n * dispositivos:\n * - **Desktop/Tablet**: Usar NavigationRail (lateral)\n * - **Mobile**: Usar NavigationBar (inferior)\n *\n * **Características:**\n * - Soporta hasta 5 ítems de navegación (recomendado: 3-5)\n * - Cada ítem tiene icono + label\n * - Indicador visual de ítem activo (fondo azul claro)\n * - Estados: active, hover, disabled\n * - Dark mode completo\n * - Accesibilidad con ARIA labels\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Tipografía Label XXSmall (10px Bold) según sistema de diseño\n * - Iconos de 16x16px según especificaciones de Figma\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label XXSmall)\n * @see docs/spacing.md - Sistema de espaciado\n * @see NavigationRail - Componente de navegación lateral para desktop\n *\n * @example\n * ```tsx\n * const items = [\n * { id: 'home', icon: <HomeIcon />, label: 'Inicio', active: true },\n * { id: 'search', icon: <SearchIcon />, label: 'Buscar' },\n * { id: 'profile', icon: <ProfileIcon />, label: 'Perfil' },\n * ];\n *\n * <NavigationBar\n * items={items}\n * activeItemId=\"home\"\n * onItemClick={(id) => console.log('Clicked:', id)}\n * />\n * ```\n *\n * @example\n * // Patrón responsive: NavigationRail en desktop, NavigationBar en mobile\n * ```tsx\n * function ResponsiveNav() {\n * return (\n * <>\n * // NavigationRail para desktop/tablet\n * <div className=\"hidden md:block\">\n * <NavigationRail items={items} />\n * </div>\n *\n * // NavigationBar para móvil\n * <div className=\"md:hidden fixed bottom-0 left-0 right-0 z-50\">\n * <NavigationBar items={items} />\n * </div>\n * </>\n * );\n * }\n * ```\n */\nexport const NavigationBar: React.FC<NavigationBarProps> = ({\n items,\n activeItemId,\n onItemClick,\n className = '',\n ariaLabel = 'Navegación Principal',\n}) => {\n // ===== VALIDACIÓN: Máximo 5 ítems =====\n if (items.length > 5) {\n console.warn('NavigationBar: Se recomienda un máximo de 5 ítems para mejor UX');\n }\n\n // ===== HANDLER DE CLICK =====\n const handleItemClick = (item: NavigationBarItem) => {\n if (item.disabled) return;\n\n // Llamar onClick del ítem individual si existe\n if (item.onClick) {\n item.onClick(item.id);\n }\n\n // Llamar onItemClick global si existe\n if (onItemClick) {\n onItemClick(item.id);\n }\n };\n\n // ===== RENDERIZAR ÍTEM =====\n const renderItem = (item: NavigationBarItem) => {\n const isActive = item.active || item.id === activeItemId;\n\n // ===== CLASES DEL CONTENEDOR DEL ÍTEM =====\n const itemContainerClasses = `\n flex-1\n flex\n flex-col\n items-center\n gap-1\n px-0.5\n py-0\n min-w-0\n cursor-pointer\n transition-all\n duration-150\n ${item.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL ICON CONTAINER =====\n // Fondo azul claro cuando está activo (rgb(219, 238, 254) = #dbeefe = primary-custom-100)\n // En dark mode usa el mismo color opaco según Figma\n const iconContainerClasses = `\n flex\n items-center\n justify-center\n px-4\n py-1\n rounded-full\n overflow-hidden\n transition-all\n duration-150\n ${\n isActive\n ? 'bg-primary-custom-100 dark:bg-primary-custom-100'\n : 'bg-transparent hover:bg-hover-overlay dark:hover:bg-hover-overlay-dark'\n }\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL LABEL =====\n // Label XXSmall: 10px Bold, line-height 12px (según typography.md y Figma)\n const labelClasses = `\n font-['SiesaBT:Bold',sans-serif]\n text-[10px]\n leading-[12px]\n font-bold\n text-center\n w-full\n min-w-0\n text-content-primary\n dark:text-dark-content-primary\n transition-colors\n duration-150\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL ICONO =====\n // Iconos de 16x16px según Figma\n const iconClasses = `\n w-4\n h-4\n shrink-0\n text-content-primary\n dark:text-dark-content-primary\n transition-colors\n duration-150\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n key={item.id}\n type=\"button\"\n className={itemContainerClasses}\n onClick={() => handleItemClick(item)}\n disabled={item.disabled}\n aria-label={item.ariaLabel || item.label}\n aria-current={isActive ? 'page' : undefined}\n >\n {/* Icon Container */}\n <div className={iconContainerClasses}>\n <span className={iconClasses}>{item.icon}</span>\n </div>\n\n {/* Label */}\n <span className={labelClasses}>{item.label}</span>\n </button>\n );\n };\n\n // ===== CLASES DEL CONTENEDOR PRINCIPAL =====\n const containerClasses = `\n bg-bg-primary\n dark:bg-dark-bg-primary\n p-4\n w-full\n transition-colors\n duration-150\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL MENU (Contenedor de ítems) =====\n const menuClasses = `\n flex\n items-start\n justify-center\n w-full\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL DESTINATIONS (Contenedor con gap) =====\n const destinationsClasses = `\n flex-1\n flex\n items-start\n gap-2\n min-h-0\n min-w-0\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <nav\n className={`${containerClasses} ${className}`.trim()}\n role=\"navigation\"\n aria-label={ariaLabel}\n >\n <div className={menuClasses}>\n <div className={destinationsClasses}>\n {items.map((item) => renderItem(item))}\n </div>\n </div>\n </nav>\n );\n};\n","import React from 'react';\n\n/**\n * Icono de convención para POSConvention\n *\n * Círculo SVG de 16x16px con colores diferentes para Light y Dark mode.\n * Basado en especificaciones de Figma:\n * - Light mode: node-id 4418-40139\n * - Dark mode: node-id 4418-40349\n *\n * Usa dos círculos superpuestos con clases CSS para alternar entre modos.\n *\n * @param lightColor - Color hexadecimal para Light mode\n * @param darkColor - Color hexadecimal para Dark mode\n * @param className - Clases CSS adicionales (opcional)\n */\nexport const ConventionIcon: React.FC<{\n lightColor: string;\n darkColor: string;\n className?: string;\n}> = ({ lightColor, darkColor, className = '' }) => (\n <svg\n className={`w-4 h-4 shrink-0 ${className}`.trim()}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n {/* Círculo para Light mode - visible por defecto, oculto en dark */}\n <circle\n cx=\"8\"\n cy=\"8\"\n r=\"8\"\n fill={lightColor}\n className=\"dark:hidden\"\n />\n {/* Círculo para Dark mode - oculto por defecto, visible en dark */}\n <circle\n cx=\"8\"\n cy=\"8\"\n r=\"8\"\n fill={darkColor}\n className=\"hidden dark:block\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { POSConventionProps } from './POSConvention.types';\nimport { ConventionIcon } from './icons';\n\n/**\n * POSConvention - Componente de leyenda/convención para estados de mesas POS\n *\n * Muestra un indicador circular de color con su respectiva etiqueta según el diseño de Figma.\n * Se usa típicamente para crear leyendas que explican el significado de colores en el sistema POS.\n *\n * **Colores según Figma (node-id: 4418-40139):**\n *\n * | Estado | Light Mode | Dark Mode |\n * |--------|------------|-----------|\n * | Available | #0e79fd (azul) | #93d1fd (azul claro) |\n * | Occupied | #af460e (naranja) | #f5a927 (amarillo) |\n * | Reserved | #7e22ce (morado) | #c084fc (morado claro) |\n * | Out of Service | #3f3f46 (gris) | #a1a1aa (gris claro) |\n *\n * **Dimensiones según Figma:**\n * - Icono: 16x16px (círculo con fill)\n * - Texto: 12px (Paragraph/Tiny - text-xs)\n * - Gap: 4px (gap-1)\n * - Line-height: 16px (leading-4)\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Colores exactos de Figma para Light y Dark mode\n * - Type safety con TypeScript estricto\n * - Accesibilidad con aria-label\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Paragraph Tiny)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Indicador de disponible\n * <POSConvention status=\"available\" />\n *\n * // Indicador de ocupada\n * <POSConvention status=\"occupied\" />\n *\n * // Leyenda completa en contenedor\n * <div className=\"p-5 rounded-lg border border-dashed border-primary-custom-300\">\n * <div className=\"flex flex-col gap-9\">\n * <POSConvention status=\"available\" />\n * <POSConvention status=\"occupied\" />\n * <POSConvention status=\"reserved\" />\n * <POSConvention status=\"outOfService\" />\n * </div>\n * </div>\n * ```\n */\nexport const POSConvention: React.FC<POSConventionProps> = ({\n status = 'available',\n className = '',\n}) => {\n // ===== CONFIGURACIÓN DE COLORES Y LABELS SEGÚN FIGMA =====\n // Colores extraídos del nodo 4418-40139 (Light) y 4418-40349 (Dark) de Figma\n // Variables de Figma: contentCustomPrimary, contentYellow, contentPurple, contentZinc\n const conventionConfig = {\n available: {\n lightColor: '#0e79fd', // Azul - contentCustomPrimary Light\n darkColor: '#93d1fd', // Azul claro - contentCustomPrimary Dark\n label: 'Disponible',\n },\n occupied: {\n lightColor: '#af460e', // Naranja - contentOrange Light\n darkColor: '#f5a927', // Amarillo - contentYellow Dark\n label: 'Ocupada',\n },\n reserved: {\n lightColor: '#7e22ce', // Morado - contentPurple Light\n darkColor: '#c084fc', // Morado claro - contentPurple Dark\n label: 'Reservada',\n },\n outOfService: {\n lightColor: '#3f3f46', // Gris - contentZinc Light (zinc-700)\n darkColor: '#a1a1aa', // Gris claro - contentZinc Dark (zinc-400)\n label: 'Fuera de Servicio',\n },\n };\n\n const config = conventionConfig[status];\n\n // ===== CLASES BASE =====\n const baseClasses = `\n inline-flex\n items-center\n gap-1\n shrink-0\n `;\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [baseClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div\n className={finalClasses}\n role=\"presentation\"\n aria-label={`Estado: ${config.label}`}\n >\n {/* Icono circular 16x16 con colores para Light y Dark mode */}\n <ConventionIcon lightColor={config.lightColor} darkColor={config.darkColor} />\n\n {/* Label de texto según Figma: Paragraph/Tiny 12px */}\n {/* Light: contentPrimary #18181b, Dark: contentPrimary #f4f4f5 */}\n <span\n className={`\n text-xs\n leading-4\n font-normal\n text-content-primary\n dark:text-dark-content-primary\n whitespace-nowrap\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {config.label}\n </span>\n </div>\n );\n};\n","import React from 'react';\n\n/**\n * Icono Check (✓) para estado Available\n * Tamaño: 12x12px\n */\nexport const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M10 3L4.5 8.5L2 6\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * Icono X Mark para estado Occupied\n * Tamaño: 12x12px\n */\nexport const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M9 3L3 9M3 3L9 9\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * Icono Calendar para estado Reserved\n * Tamaño: 12x12px\n */\nexport const CalendarIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M10.5 5H1.5M8.5 1V3M3.5 1V3M3.25 11H8.75C9.57843 11 10.25 10.3284 10.25 9.5V3.5C10.25 2.67157 9.57843 2 8.75 2H3.25C2.42157 2 1.75 2.67157 1.75 3.5V9.5C1.75 10.3284 2.42157 11 3.25 11Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * Icono No Symbol (Prohibido) para estado Out of Service\n * Tamaño: 12x12px\n */\nexport const NoSymbolIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M10.5 6C10.5 8.48528 8.48528 10.5 6 10.5C3.51472 10.5 1.5 8.48528 1.5 6C1.5 3.51472 3.51472 1.5 6 1.5C8.48528 1.5 10.5 3.51472 10.5 6Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n />\n <path\n d=\"M9.18198 2.81802L2.81802 9.18198\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n />\n </svg>\n);\n\n/**\n * Icono de Usuario/Personas para mostrar capacidad\n * Tamaño: 13x10px (según especificaciones de Figma)\n */\nexport const UsersIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"13\"\n height=\"10\"\n viewBox=\"0 0 13 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M9.25 9V8C9.25 6.89543 8.35457 6 7.25 6H2.75C1.64543 6 0.75 6.89543 0.75 8V9M12.25 9V8C12.25 6.89543 11.3546 6 10.25 6H9.75M7 2.5C7 3.60457 6.10457 4.5 5 4.5C3.89543 4.5 3 3.60457 3 2.5C3 1.39543 3.89543 0.5 5 0.5C6.10457 0.5 7 1.39543 7 2.5ZM10 2C10 2.82843 9.32843 3.5 8.5 3.5C7.67157 3.5 7 2.82843 7 2C7 1.17157 7.67157 0.5 8.5 0.5C9.32843 0.5 10 1.17157 10 2Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { POSLocationButtonProps } from './POSLocationButton.types';\nimport { CheckIcon, XMarkIcon, CalendarIcon, NoSymbolIcon, UsersIcon } from './icons';\n\n/**\n * POSLocationButton del sistema de diseño Siesa\n *\n * Botón especializado para punto de venta (POS) que muestra el estado de disponibilidad\n * de una ubicación física (mesa, salón, terraza, etc.) con indicadores visuales claros.\n *\n * **Estados de disponibilidad (status):**\n * - `available`: Disponible (verde/lime) con icono ✓\n * - `occupied`: Ocupada (naranja/yellow) con icono ✗\n * - `reserved`: Reservada (morado/purple) con icono 📅\n * - `outOfService`: Fuera de servicio (gris/zinc) con icono 🚫\n *\n * **Estados visuales (state):**\n * - `enabled`: Estado normal con fondo blanco/dark\n * - `actived`: Estado seleccionado con fondo coloreado\n *\n * **Características:**\n * - Ancho flexible: por defecto ocupa el 100% del contenedor (fullWidth=true)\n * - Altura fija: 68px (optimizado para interfaces POS)\n * - Muestra nombre de ubicación y capacidad (ej: \"1/8 mesas\")\n * - Badge visual con icono y texto del estado\n * - Dark mode completo en todos los estados\n * - Focus ring adaptativo\n * - Transiciones suaves\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Ubicación disponible\n * <POSLocationButton\n * locationName=\"Antejardín\"\n * status=\"available\"\n * capacity={{ current: 1, total: 8 }}\n * onClick={() => console.log('Seleccionado')}\n * />\n *\n * // Ubicación ocupada y seleccionada\n * <POSLocationButton\n * locationName=\"Terraza\"\n * status=\"occupied\"\n * state=\"actived\"\n * capacity={{ current: 5, total: 8 }}\n * />\n *\n * // Ubicación reservada\n * <POSLocationButton\n * locationName=\"Salón Principal\"\n * status=\"reserved\"\n * capacity={{ current: 3, total: 12 }}\n * />\n *\n * // Fuera de servicio\n * <POSLocationButton\n * locationName=\"Bar\"\n * status=\"outOfService\"\n * disabled\n * />\n * ```\n */\nexport const POSLocationButton: React.FC<POSLocationButtonProps> = ({\n locationName,\n status = 'available',\n state = 'enabled',\n capacity,\n onClick,\n disabled = false,\n className = '',\n ariaLabel,\n fullWidth = true,\n}) => {\n // ===== CONFIGURACIÓN DE COLORES POR STATUS =====\n // Mapeo de colores según especificaciones de Figma (pixel-perfect)\n const statusConfig = {\n available: {\n // Azul Primary Custom (según Figma: #0e79fd)\n textColor: 'text-primary-custom-600 dark:text-primary-custom-600',\n badgeBg: 'bg-primary-custom-100 dark:bg-blue-900/30',\n badgeText: 'text-primary-custom-600 dark:text-blue-400',\n activedBg: 'bg-primary-custom-100 dark:bg-blue-900/30',\n icon: CheckIcon,\n badgeLabel: 'Disponible',\n },\n occupied: {\n // Naranja/Yellow (según Figma: #af460e para texto, #fcedc9 para fondo)\n textColor: 'text-[#af460e] dark:text-orange-400',\n badgeBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',\n badgeText: 'text-[#af460e] dark:text-orange-400',\n activedBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',\n icon: XMarkIcon,\n badgeLabel: 'Ocupada',\n },\n reserved: {\n // Morado/Purple (según Figma: #7e22ce para texto, #f3e8ff para fondo)\n textColor: 'text-[#7e22ce] dark:text-fuchsia-400',\n badgeBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',\n badgeText: 'text-[#7e22ce] dark:text-purple-400',\n activedBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',\n icon: CalendarIcon,\n badgeLabel: 'Reservada',\n },\n outOfService: {\n // Gris/Zinc (según Figma: #3f3f46 para texto, #f4f4f5 para fondo)\n textColor: 'text-[#3f3f46] dark:text-zinc-400',\n badgeBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',\n badgeText: 'text-content-tertiary dark:text-zinc-400',\n activedBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',\n icon: NoSymbolIcon,\n badgeLabel: 'F. de Servicio',\n },\n };\n\n const config = statusConfig[status];\n const StatusIcon = config.icon;\n\n // ===== CLASES DE FONDO SEGÚN STATE =====\n const backgroundClasses =\n state === 'actived'\n ? config.activedBg // Fondo coloreado cuando está activo\n : 'bg-white dark:bg-dark-bg-primary'; // Fondo blanco/dark cuando está enabled\n\n // ===== CLASES DE ANCHO =====\n const widthClasses = fullWidth ? 'w-full' : 'w-[189px]';\n\n // ===== CLASES BASE =====\n const baseClasses = `\n flex\n flex-col\n items-stretch\n justify-between\n ${widthClasses}\n h-[68px]\n p-2\n rounded-lg\n cursor-pointer\n transition-all\n duration-150\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n hover:shadow-md\n active:scale-[0.98]\n disabled:opacity-50\n disabled:cursor-not-allowed\n disabled:pointer-events-none\n `;\n\n // ===== COMBINAR CLASES =====\n const buttonClasses = [baseClasses, backgroundClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== FORMATEAR TEXTO DE CAPACIDAD =====\n const capacityText = capacity\n ? `${capacity.current}/${capacity.total} mesas`\n : null;\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n aria-label={ariaLabel || `${locationName} - ${config.badgeLabel}`}\n type=\"button\"\n >\n {/* ===== TÍTULO (Nombre de ubicación) ===== */}\n <div\n className={`\n text-base\n font-bold\n leading-6\n ${config.textColor}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {locationName}\n </div>\n\n {/* ===== CONTENIDO (Capacidad + Badge) ===== */}\n <div className=\"flex items-center justify-between\">\n {/* Capacidad (izquierda) */}\n {capacityText && (\n <div className=\"flex items-center gap-1\">\n <UsersIcon className={config.textColor} />\n <span\n className={`\n text-[10px]\n leading-[12px]\n ${config.textColor}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {capacityText}\n </span>\n </div>\n )}\n\n {/* Badge (derecha) */}\n <div\n className={`\n inline-flex\n items-center\n gap-1\n px-1.5\n py-1\n rounded-md\n ${config.badgeBg}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n <StatusIcon className={config.badgeText} />\n <span\n className={`\n text-xs\n leading-4\n ${config.badgeText}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {config.badgeLabel}\n </span>\n </div>\n </div>\n </button>\n );\n};\n","import React from 'react';\nimport type { POSNumberButtonProps } from './POSNumberButton.types';\n\n/**\n * Componente POSNumberButton del sistema de diseño Siesa\n * Botón numérico especializado para sistemas POS (Point of Sale)\n *\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * **Características principales:**\n * - Diseñado para pantallas táctiles y POS\n * - Tipografía Display Tiny (48px Bold) para números grandes\n * - Tres tamaños: Small (40x40), Medium (65x65), Large (80x80)\n * - Opción de borde visible o sin borde\n * - Estados: Default, Hover, Active, Disabled\n * - Touch-friendly: active:scale-95 para feedback táctil\n *\n * **Variantes:**\n * - `border=false`: Botón sin borde, hover cambia a primary\n * - `border=true`: Botón con borde, hover resalta el borde\n *\n * **Tamaños:**\n * - `s` (40x40px): Compacto, para teclados numéricos pequeños\n * - `m` (65x65px): Mediano, tamaño intermedio\n * - `l` (80x80px): Grande, tamaño por defecto para POS\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n * - Feedback visual inmediato con active:scale-95\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Display Tiny)\n * @see docs/spacing.md - Sistema de espaciado\n * @see src/components/Button/Button.tsx - Componente Button de referencia\n *\n * @example\n * ```tsx\n * // Botón numérico grande (POS)\n * <POSNumberButton size=\"l\">1</POSNumberButton>\n *\n * // Botón con borde\n * <POSNumberButton size=\"l\" border>2</POSNumberButton>\n *\n * // Botón compacto\n * <POSNumberButton size=\"s\">3</POSNumberButton>\n *\n * // Teclado numérico completo\n * <div className=\"grid grid-cols-3 gap-2\">\n * {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (\n * <POSNumberButton key={num} size=\"m\" onClick={() => handleInput(num)}>\n * {num}\n * </POSNumberButton>\n * ))}\n * </div>\n * ```\n */\nexport const POSNumberButton: React.FC<POSNumberButtonProps> = ({\n size = 'l',\n border = false,\n children,\n disabled = false,\n className = '',\n onClick,\n ariaLabel,\n htmlType = 'button',\n ...rest\n}) => {\n // ===== CLASES DE TAMAÑO =====\n // Basado en especificaciones de Figma: L=80x80, M=65x65, S=40x40\n const sizeClasses = {\n s: 'w-10 h-10', // 40x40px\n m: 'w-[65px] h-[65px]', // 65x65px\n l: 'w-20 h-20', // 80x80px\n };\n\n // ===== CLASES DE TEXTO =====\n // Display Tiny (48px Bold) según typography.md → text-5xl\n // Para tamaño small, reducimos a text-2xl (24px)\n const textSizeClasses = {\n s: 'text-2xl', // 24px para botones pequeños\n m: 'text-5xl', // 48px Display Tiny\n l: 'text-5xl', // 48px Display Tiny\n };\n\n // ===== CLASES DE ESTADO (Sin Borde) =====\n const noBorderStateClasses = `\n bg-white\n text-content-primary\n hover:bg-primary-custom-600\n hover:text-primary-inverse-content\n active:bg-primary-custom-600\n active:text-primary-inverse-content\n active:scale-95\n dark:bg-dark-bg-primary\n dark:text-dark-content-primary\n dark:hover:bg-dark-bg-inverse\n dark:hover:text-dark-content-inverse\n dark:active:bg-dark-bg-inverse\n dark:active:text-dark-content-inverse\n dark:active:scale-95\n `;\n\n // ===== CLASES DE ESTADO (Con Borde) =====\n const withBorderStateClasses = `\n bg-white\n text-content-primary\n border\n border-border-primary\n hover:bg-primary-custom-600\n hover:text-primary-inverse-content\n hover:border-primary-inverse-border\n active:bg-primary-custom-600\n active:text-primary-inverse-content\n active:border-primary-inverse-border\n active:scale-95\n dark:bg-dark-bg-primary\n dark:text-dark-content-primary\n dark:border-dark-border-primary\n dark:hover:bg-dark-bg-inverse\n dark:hover:text-dark-content-inverse\n dark:hover:border-primary-inverse-border\n dark:active:bg-dark-bg-inverse\n dark:active:text-dark-content-inverse\n dark:active:border-primary-inverse-border\n dark:active:scale-95\n `;\n\n // ===== CLASES BASE =====\n const baseClasses = `\n inline-flex\n items-center\n justify-center\n rounded-lg\n font-bold\n tracking-tighter\n whitespace-nowrap\n cursor-pointer\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n disabled:opacity-50\n disabled:cursor-not-allowed\n disabled:pointer-events-none\n transition-all\n duration-150\n `;\n\n // ===== COMBINAR TODAS LAS CLASES =====\n const buttonClasses = [\n baseClasses,\n sizeClasses[size],\n textSizeClasses[size],\n border ? withBorderStateClasses : noBorderStateClasses,\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type={htmlType}\n className={buttonClasses}\n disabled={disabled}\n onClick={onClick}\n aria-label={ariaLabel || `Número ${children}`}\n {...rest}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport type { POSProductButtonProps } from './POSProductButton.types';\n\n/**\n * Componente POSProductButton del sistema de diseño Siesa\n *\n * Botón especializado para sistemas POS que combina una imagen de producto\n * con un label descriptivo. Diseñado para selección rápida de productos.\n *\n * **Estados disponibles:**\n * - `default`: Estado normal con fondo blanco\n * - `active`: Estado seleccionado con fondo azul claro y texto azul\n * - `disabled`: Estado deshabilitado con opacidad reducida\n *\n * **Características:**\n * - Imagen con aspect ratio 158:80 (proporción de Figma)\n * - Label con tipografía Label Small (14px Bold)\n * - Soporte completo de dark mode\n * - Estados hover, active y focus\n * - Transiciones suaves\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Tokens de color consistentes con la documentación\n * - Estados hover y active completos\n * - Tipografía Label Small (14px Bold) según sistema de diseño\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label)\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/border-radius.md - Border radius\n *\n * @example\n * ```tsx\n * // Botón de producto normal\n * <POSProductButton\n * image=\"/images/parrilla.jpg\"\n * label=\"A la parrilla\"\n * onClick={() => console.log('Producto seleccionado')}\n * />\n *\n * // Botón de producto activo/seleccionado\n * <POSProductButton\n * image=\"/images/parrilla.jpg\"\n * label=\"A la parrilla\"\n * active={true}\n * />\n *\n * // Botón de producto deshabilitado\n * <POSProductButton\n * image=\"/images/parrilla.jpg\"\n * label=\"A la parrilla\"\n * disabled={true}\n * />\n * ```\n */\nexport const POSProductButton: React.FC<POSProductButtonProps> = ({\n image,\n label,\n active = false,\n disabled = false,\n onClick,\n className = '',\n ariaLabel,\n}) => {\n // ===== CLASES BASE =====\n const baseClasses = `\n flex\n flex-col\n gap-2\n p-3\n rounded-lg\n font-bold\n text-sm\n transition-all\n duration-150\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n `;\n\n // ===== CLASES DE ESTADO =====\n const stateClasses = disabled\n ? `\n bg-white\n text-content-primary\n opacity-55\n cursor-not-allowed\n pointer-events-none\n dark:bg-dark-bg-primary\n dark:text-dark-content-primary\n `\n : active\n ? `\n bg-primary-custom-100\n text-primary-custom-600\n cursor-pointer\n hover:bg-primary-custom-100\n active:scale-95\n dark:bg-primary-custom-100/20\n dark:text-primary-custom-600\n dark:hover:bg-primary-custom-100/30\n dark:active:scale-95\n `\n : `\n bg-white\n text-content-primary\n cursor-pointer\n hover:bg-background-secondary\n active:scale-95\n dark:bg-dark-bg-primary\n dark:text-dark-content-primary\n dark:hover:bg-dark-bg-primary/80\n dark:active:scale-95\n `;\n\n // ===== COMBINAR TODAS LAS CLASES =====\n const buttonClasses = [baseClasses, stateClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type=\"button\"\n className={buttonClasses}\n disabled={disabled}\n onClick={onClick}\n aria-label={ariaLabel || label}\n aria-pressed={active}\n >\n {/* Imagen del producto */}\n <div className=\"aspect-158/80 w-full rounded-lg overflow-hidden\">\n <img\n src={image}\n alt={label}\n className=\"w-full h-full object-cover\"\n />\n </div>\n\n {/* Label del producto */}\n <div className=\"w-full text-left leading-5\">\n {label}\n </div>\n </button>\n );\n};\n","import React from 'react';\n\n/**\n * Icono Plus (heroicons-micro/plus)\n * Usado en el botón \"Agregar\" del POSProductCard\n * Tamaño: 16x16px según especificación de Figma\n */\nexport const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n aria-hidden=\"true\"\n >\n <path\n d=\"M8 3V13M3 8H13\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { POSProductCardProps } from './POSProductCard.types';\nimport { Button } from '../Button';\nimport { PlusIcon } from './icons';\n\n/**\n * Componente POSProductCard del sistema de diseño Siesa\n *\n * Card especializado para sistemas POS que muestra información de producto\n * con imagen, nombre, precio y botón de agregar. Diseñado para catálogos\n * de productos y selección rápida en punto de venta.\n *\n * **Estados disponibles:**\n * - `enabled`: Estado normal\n * - Light: fondo blanco (#ffffff), texto negro (#18181b)\n * - Dark: fondo oscuro (#18181b), texto claro (#f4f4f5)\n * - `active`: Estado seleccionado\n * - Light: fondo azul claro (#dbeefe), texto azul (#0e79fd)\n * - Dark: fondo azul oscuro (#112d57), texto celeste (#93d1fd)\n * - `disabled`: Estado deshabilitado con opacidad reducida\n *\n * **Características:**\n * - Imagen de producto con aspect ratio fijo y rounded-lg\n * - Nombre del producto con tipografía Label Small (14px Bold)\n * - Precio con tipografía Heading Small (24px Bold) y letter-spacing -2.5%\n * - Botón \"Agregar\" reutiliza el componente Button del sistema\n * - Soporte completo de dark mode pixel-perfect\n * - Transiciones suaves\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Tokens de color consistentes con Figma\n * - Estados hover y active completos\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/shadows.md - Sistema de sombras\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336 - Diseño Figma\n *\n * @example\n * ```tsx\n * // Card de producto normal\n * <POSProductCard\n * image=\"/images/caprese.jpg\"\n * productName=\"Ensalada Caprese\"\n * price=\"$ 40.000\"\n * onAddClick={() => console.log('Producto agregado')}\n * />\n *\n * // Card de producto activo/seleccionado\n * <POSProductCard\n * image=\"/images/caprese.jpg\"\n * productName=\"Ensalada Caprese\"\n * price=\"$ 40.000\"\n * active={true}\n * />\n *\n * // Card de producto deshabilitado\n * <POSProductCard\n * image=\"/images/caprese.jpg\"\n * productName=\"Ensalada Caprese\"\n * price=\"$ 40.000\"\n * disabled={true}\n * />\n * ```\n */\nexport const POSProductCard: React.FC<POSProductCardProps> = ({\n image,\n productName,\n price,\n buttonText = 'Agregar',\n active = false,\n disabled = false,\n onAddClick,\n onCardClick,\n className = '',\n ariaLabel,\n}) => {\n // ===== CLASES BASE DEL CARD =====\n const baseClasses = `\n flex\n flex-col\n gap-2\n p-3\n rounded-lg\n w-[170px]\n transition-all\n duration-150\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n `;\n\n // ===== CLASES DE ESTADO DEL CARD =====\n // Light: enabled=#ffffff, active=#dbeefe\n // Dark: enabled=#18181b, active=#112d57\n const stateClasses = disabled\n ? `\n bg-white\n opacity-55\n cursor-not-allowed\n dark:bg-dark-bg-primary\n `\n : active\n ? `\n bg-primary-custom-100\n cursor-pointer\n dark:bg-dark-bg-custom\n `\n : `\n bg-white\n cursor-pointer\n dark:bg-dark-bg-primary\n `;\n\n // ===== CLASES DE TEXTO SEGÚN ESTADO =====\n // Light: enabled=#18181b, active=#0e79fd\n // Dark: enabled=#f4f4f5, active=#93d1fd\n const textClasses = disabled\n ? `\n text-content-primary\n dark:text-dark-content-primary\n `\n : active\n ? `\n text-primary-custom-600\n dark:text-dark-content-custom\n `\n : `\n text-content-primary\n dark:text-dark-content-primary\n `;\n\n // ===== COMBINAR CLASES DEL CARD =====\n const cardClasses = [baseClasses, stateClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== HANDLER DEL CLICK EN EL CARD =====\n const handleCardClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n // Solo propagar si no se hizo clic en el botón\n if ((event.target as HTMLElement).closest('button')) return;\n onCardClick?.(event);\n };\n\n // ===== HANDLER DEL CLICK EN EL BOTÓN =====\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n if (disabled) return;\n onAddClick?.(event);\n };\n\n return (\n <div\n className={cardClasses}\n onClick={handleCardClick}\n role=\"article\"\n aria-label={ariaLabel || `${productName} - ${price}`}\n tabIndex={disabled ? -1 : 0}\n >\n {/* Sección de información del producto */}\n <div className=\"flex flex-col gap-3 w-full\">\n {/* Imagen del producto */}\n <div className=\"h-[88px] w-full rounded-lg overflow-hidden\">\n <img\n src={image}\n alt={productName}\n className=\"w-full h-full object-cover\"\n />\n </div>\n\n {/* Datos del producto (nombre y precio) */}\n <div className={`flex flex-col w-full font-bold ${textClasses}`.trim().replace(/\\s+/g, ' ')}>\n {/* Nombre del producto - Label Small (14px) */}\n <div className=\"text-sm leading-5\">\n {productName}\n </div>\n\n {/* Precio - Heading Small (24px) con letter-spacing -2.5% (tracking-tighter) */}\n <div className=\"text-2xl leading-8 tracking-tighter\">\n {price}\n </div>\n </div>\n </div>\n\n {/* Botón Agregar - Reutiliza el componente Button del sistema */}\n <Button\n type=\"default\"\n size=\"sm\"\n leftIcon={<PlusIcon className=\"w-4 h-4\" />}\n onClick={handleButtonClick}\n disabled={disabled}\n fullWidth\n ariaLabel={`${buttonText} ${productName}`}\n >\n {buttonText}\n </Button>\n </div>\n );\n};\n","import React from 'react';\n\n/**\n * TrashIcon - Icono de papelera para eliminar items\n * Basado en Heroicons Micro (16x16px)\n */\nexport const TrashIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { POSProductSidebarItemsProps } from './POSProductSidebarItems.types';\nimport { Quantity } from '../Quantity/Quantity';\nimport { TrashIcon } from './icons';\n\n/**\n * POSProductSidebarItems - Componente de item de producto para sidebar POS\n *\n * Componente pixel-perfect basado en Figma (node 4507-28013) para mostrar\n * productos en el sidebar de un sistema POS con soporte completo para dark mode.\n *\n * **Características:**\n * - Badge de categoría con 19 colores configurables\n * - Referencia del producto (text-[10px]/leading-3)\n * - Precio total (text-xs/font-bold)\n * - Nombre del producto (text-xs/font-bold)\n * - Descripción con items opcionales (fondo terciario)\n * - Control de cantidad integrado (Quantity component)\n * - Botón de eliminar con color de error\n *\n * **Especificaciones de Figma:**\n * - Ancho base: 272px\n * - Spacing: gap-1 (4px) entre elementos del producto, gap-2 (8px) entre secciones\n * - Badge: rounded-md (6px), px-1.5, py-1, text-xs/leading-4\n * - Description section: bg-background-tertiary, p-2, rounded-lg\n * - Delete icon: 24x24px, color red-700\n *\n * **Dark Mode:**\n * Los colores se adaptan automáticamente en dark mode:\n * - Textos principales: text-content-primary → dark:text-dark-content-primary\n * - Description background: bg-background-tertiary → dark:bg-zinc-700\n * - Badge colores: Mantienen contraste en ambos modos\n * - Delete button: text-red-700 → dark:text-red-500\n *\n * **Orden de modificadores:** {responsive}:{dark}:{state}:{utility}\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013 - Diseño Figma\n *\n * @example\n * ```tsx\n * <POSProductSidebarItems\n * categoryLabel=\"Entradas\"\n * productRef=\"00147258369\"\n * price=\"$ 40,000.00\"\n * productName=\"Nombre producto\"\n * descriptionItems={[\n * { description: \"Papas limón mediana\", price: \"$ 40,000.00\" },\n * { description: \"Papas limón mediana\", price: \"$ 40,000.00\" },\n * ]}\n * quantity={0}\n * onQuantityChange={(qty) => console.log(qty)}\n * onDelete={() => console.log('Eliminar')}\n * />\n * ```\n */\nexport const POSProductSidebarItems: React.FC<POSProductSidebarItemsProps> = ({\n categoryLabel,\n categoryColor = 'lime',\n productRef,\n price,\n productName,\n descriptionItems = [],\n showDescription = true,\n quantity = 0,\n minQuantity = 0,\n maxQuantity,\n onQuantityChange,\n onDelete,\n disabled = false,\n className = '',\n deleteIcon,\n}) => {\n // ===== MAPA DE COLORES PARA BADGES =====\n // Basado en Figma node 4507-28432: bg lime-100 (#ecfccb) y text lime-700 (#4d7c0f)\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n const categoryColorClasses: Record<string, { bg: string; text: string }> = {\n lime: {\n bg: 'bg-lime-100 dark:bg-lime-900/40',\n text: 'text-lime-700 dark:text-lime-300'\n },\n red: {\n bg: 'bg-red-100 dark:bg-red-900/40',\n text: 'text-red-700 dark:text-red-300'\n },\n orange: {\n bg: 'bg-orange-100 dark:bg-orange-900/40',\n text: 'text-orange-700 dark:text-orange-300'\n },\n amber: {\n bg: 'bg-amber-100 dark:bg-amber-900/40',\n text: 'text-amber-700 dark:text-amber-300'\n },\n yellow: {\n bg: 'bg-yellow-100 dark:bg-yellow-900/40',\n text: 'text-yellow-700 dark:text-yellow-300'\n },\n green: {\n bg: 'bg-green-100 dark:bg-green-900/40',\n text: 'text-green-700 dark:text-green-300'\n },\n emerald: {\n bg: 'bg-emerald-100 dark:bg-emerald-900/40',\n text: 'text-emerald-700 dark:text-emerald-300'\n },\n teal: {\n bg: 'bg-teal-100 dark:bg-teal-900/40',\n text: 'text-teal-700 dark:text-teal-300'\n },\n cyan: {\n bg: 'bg-cyan-100 dark:bg-cyan-900/40',\n text: 'text-cyan-700 dark:text-cyan-300'\n },\n sky: {\n bg: 'bg-sky-100 dark:bg-sky-900/40',\n text: 'text-sky-700 dark:text-sky-300'\n },\n blue: {\n bg: 'bg-blue-100 dark:bg-blue-900/40',\n text: 'text-blue-700 dark:text-blue-300'\n },\n indigo: {\n bg: 'bg-indigo-100 dark:bg-indigo-900/40',\n text: 'text-indigo-700 dark:text-indigo-300'\n },\n violet: {\n bg: 'bg-violet-100 dark:bg-violet-900/40',\n text: 'text-violet-700 dark:text-violet-300'\n },\n purple: {\n bg: 'bg-purple-100 dark:bg-purple-900/40',\n text: 'text-purple-700 dark:text-purple-300'\n },\n fuchsia: {\n bg: 'bg-fuchsia-100 dark:bg-fuchsia-900/40',\n text: 'text-fuchsia-700 dark:text-fuchsia-300'\n },\n pink: {\n bg: 'bg-pink-100 dark:bg-pink-900/40',\n text: 'text-pink-700 dark:text-pink-300'\n },\n rose: {\n bg: 'bg-rose-100 dark:bg-rose-900/40',\n text: 'text-rose-700 dark:text-rose-300'\n },\n zinc: {\n bg: 'bg-zinc-100 dark:bg-zinc-800/50',\n text: 'text-zinc-600 dark:text-zinc-300'\n },\n primary: {\n bg: 'bg-primary-custom-100 dark:bg-primary-custom-600/30',\n text: 'text-primary-custom-600 dark:text-primary-custom-300'\n },\n };\n\n const colors = categoryColorClasses[categoryColor] || categoryColorClasses.lime;\n\n // Handler para cambio de cantidad\n const handleQuantityChange = (newQuantity: number) => {\n if (!disabled && onQuantityChange) {\n onQuantityChange(newQuantity);\n }\n };\n\n // Handler para eliminar\n const handleDelete = () => {\n if (!disabled && onDelete) {\n onDelete();\n }\n };\n\n return (\n <div\n className={`\n flex\n flex-col\n gap-2\n w-full\n ${disabled ? 'opacity-50 pointer-events-none' : ''}\n ${className}\n `.trim().replace(/\\s+/g, ' ')}\n data-component=\"POSProductSidebarItems\"\n >\n {/* ===== BODY SECTION ===== */}\n <div className=\"flex flex-col gap-2 w-full\">\n {/* ===== PRODUCT INFO ===== */}\n <div className=\"flex flex-col gap-1 w-full\">\n {/* Row: Badge + Ref + Price - Figma node 4507:28398 */}\n <div className=\"flex items-center gap-1 w-full\">\n {/* Col: Badge + Ref - Figma node 4507:28399 */}\n <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n {/* Category Badge - Figma node 4507:28432 */}\n <div\n className={`\n inline-flex\n items-center\n px-1.5\n py-1\n rounded-md\n transition-colors\n duration-150\n ${colors.bg}\n `.trim().replace(/\\s+/g, ' ')}\n >\n <span\n className={`\n text-xs\n leading-4\n font-normal\n text-center\n whitespace-nowrap\n ${colors.text}\n `.trim().replace(/\\s+/g, ' ')}\n >\n {categoryLabel}\n </span>\n </div>\n\n {/* Product Reference - Figma node 4507:28401 - Paragraph/XXSmall 10px */}\n <span className=\"text-[10px] leading-3 font-normal text-content-primary dark:text-dark-content-primary whitespace-nowrap\">\n {productRef}\n </span>\n </div>\n\n {/* Col: Price - Figma node 4507:28450 - Label/Tiny 12px Bold */}\n <div className=\"flex items-center shrink-0\">\n <span className=\"text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right\">\n {price}\n </span>\n </div>\n </div>\n\n {/* Row: Product Name - Figma node 4507:28404 - Label/Tiny 12px Bold */}\n <div className=\"flex items-start w-full\">\n <span className=\"text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary flex-1 min-w-0\">\n {productName}\n </span>\n </div>\n </div>\n\n {/* ===== DESCRIPTION SECTION ===== */}\n {/* Figma node 4507:28405 - Background tertiary con items de descripción */}\n {showDescription && descriptionItems.length > 0 && (\n <div\n className={`\n flex\n flex-col\n gap-2\n p-2\n rounded-lg\n bg-background-secondary\n dark:bg-zinc-700\n w-full\n transition-colors\n duration-150\n `.trim().replace(/\\s+/g, ' ')}\n >\n {descriptionItems.map((item, index) => (\n <div\n key={index}\n className=\"flex items-center gap-1 w-full\"\n >\n {/* Description text - Figma Body/Small 12px Regular */}\n <span className=\"flex-1 min-w-0 text-xs leading-3 font-normal text-content-primary dark:text-dark-content-primary\">\n {item.description}\n </span>\n {/* Price - Figma Body/Small Bold 12px */}\n <span className=\"text-xs leading-3 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right shrink-0\">\n {item.price}\n </span>\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/* ===== ACTIONS SECTION ===== */}\n {/* Figma node 4507:28412 - Quantity control + Delete button */}\n <div className=\"flex items-center justify-between w-full\">\n {/* Quantity Control - Figma width: 118px */}\n <div className=\"w-[118px]\">\n <Quantity\n value={quantity}\n min={minQuantity}\n max={maxQuantity}\n onChange={handleQuantityChange}\n disabled={disabled}\n />\n </div>\n\n {/* Delete Button - Figma node 4514:28258 - 24x24px, color red-700 (#b91c1c) */}\n <button\n type=\"button\"\n onClick={handleDelete}\n disabled={disabled}\n className={`\n flex\n items-center\n justify-center\n w-6\n h-6\n rounded-md\n text-red-700\n dark:text-red-500\n hover:text-red-800\n dark:hover:text-red-400\n hover:bg-red-50\n dark:hover:bg-red-900/20\n focus:outline-hidden\n focus:ring-2\n focus:ring-red-500/50\n dark:focus:ring-red-400/50\n focus:ring-offset-1\n focus:ring-offset-white\n dark:focus:ring-offset-dark-bg-primary\n active:scale-95\n transition-all\n duration-150\n ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}\n `.trim().replace(/\\s+/g, ' ')}\n aria-label=\"Eliminar producto\"\n >\n {deleteIcon || <TrashIcon className=\"w-[18px] h-[21px]\" />}\n </button>\n </div>\n </div>\n );\n};\n\nPOSProductSidebarItems.displayName = 'POSProductSidebarItems';\n","import React from 'react';\nimport type { POSTableProps } from './POSTable.types';\n\n/**\n * POSTable - Sistema de visualización de mesas de restaurante\n *\n * Componente para mostrar mesas de restaurante con diferentes estados\n * (disponible, ocupada, reservada) y configuraciones de sillas según diseño de Figma.\n *\n * ⚠️ IMPORTANTE - COLORES PERSONALIZADOS DEL CLIENTE:\n * Este componente usa colores específicos hardcodeados según el diseño del cliente.\n * Estos NO son tokens del sistema de diseño general, sino colores únicos para POSTable.\n * Esta es una EXCEPCIÓN JUSTIFICADA similar a los iconos personalizados de POSTable.\n *\n * ESPECIFICACIONES PIXEL-PERFECT DE FIGMA:\n *\n * Colores exactos (ESPECÍFICOS DEL CLIENTE):\n *\n * LIGHT MODE:\n * - Available (Azul): #0e79fd (border, mesa, silla, texto) - Azul primario del sistema\n * - Available Active: Bg #dbeefe + Border #bce4ff (cuando isActive=true)\n * - Busy (Naranja): #af460e (border, mesa, silla, texto)\n * - Busy Active: Bg #fed7aa + Border #fed7aa (cuando isActive=true)\n * - Reserved (Púrpura): #7e22ce (border, mesa, silla, texto)\n * - Reserved Active: Bg #e9d5ff + Border #e9d5ff (cuando isActive=true)\n *\n * DARK MODE (colores más brillantes para mejor visibilidad):\n * - Available (Azul claro): #93d1fd (border, mesa, silla, texto)\n * - Available Active: Bg #1e3a5f + Border #1e3a5f (cuando isActive=true)\n * - Busy (Naranja/Amarillo): #f5a927 (border, mesa, silla, texto)\n * - Busy Active: Bg #5c3a1e + Border #5c3a1e (cuando isActive=true)\n * - Reserved (Púrpura claro): #c084fc (border, mesa, silla, texto)\n * - Reserved Active: Bg #3b1f5c + Border #3b1f5c (cuando isActive=true)\n *\n * - Texto del label: Mismo color del estado (está FUERA de la mesa según Figma)\n *\n * Dimensiones exactas:\n * - Container: 160x160px, border-radius: 8px, border: 2px\n * - Inner container: 134x134px, gap: 4px\n * - Mesa Square: 64x64px, border-radius: 4px\n * - Mesa Circle: 64x64px, border-radius: 9999px\n * - Mesa Rectangle: 80x64px, border-radius: 4px\n * - Mesa Oval: 80x64px, border-radius: 24px\n * - Silla: 28x22px, border-radius: 4px\n * - Silla Respaldo (top): 28x16px (72.73% height)\n * - Silla Asiento (bottom): 24x14px (85.71% width, 63.64% height)\n * - Gap: 4px entre todos los elementos\n *\n * Tipografía:\n * - Label: 10px / 12px line-height, weight: 400, font: SiesaBT\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Valores exactos de Figma con notación [px]\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <POSTable\n * tableNumber=\"12\"\n * status=\"available\"\n * shape=\"square\"\n * chairs={4}\n * onClick={() => console.log('Mesa seleccionada')}\n * />\n * ```\n */\nexport const POSTable: React.FC<POSTableProps> = ({\n tableNumber,\n status = 'available',\n shape = 'square',\n chairs = 4,\n showChairs = true,\n isActive = false,\n onClick,\n className = '',\n disabled = false,\n children,\n}) => {\n // ===== COLORES POR ESTADO (VALORES EXACTOS DE FIGMA) =====\n // ⚠️ NOTA: Estos colores son ESPECÍFICOS del cliente (excepción justificada)\n // NO son tokens del sistema general de diseño\n // Light Mode: #0e79fd (azul primario), #af460e (naranja), #7e22ce (púrpura)\n // Dark Mode: #93d1fd (azul claro), #f5a927 (naranja/amarillo), #c084fc (púrpura claro)\n const statusColors = {\n available: {\n // Enabled state - Light: #0e79fd (azul primario del sistema), Dark: #93d1fd\n border: 'border-[#0e79fd]',\n borderDark: 'dark:border-[#93d1fd]',\n bgEnabled: 'bg-transparent',\n bgEnabledDark: 'dark:bg-transparent',\n // Actived state - Light: Bg #dbeefe + Border #bce4ff según Figma\n bgActive: 'bg-primary-custom-100',\n bgActiveDark: 'dark:bg-[#1e3a5f]',\n borderActive: 'border-[#bce4ff]',\n borderActiveDark: 'dark:border-[#1e3a5f]',\n // Table and chairs - Light: #0e79fd, Dark: #93d1fd\n table: 'bg-[#0e79fd]',\n tableDark: 'dark:bg-[#93d1fd]',\n chair: 'bg-[#0e79fd]',\n chairDark: 'dark:bg-[#93d1fd]',\n // Text (mismo color del estado - label está FUERA de la mesa según Figma)\n text: 'text-[#0e79fd]',\n textDark: 'dark:text-[#93d1fd]',\n // Focus ring\n focusRing: 'focus:ring-[#93d1fd]',\n focusRingDark: 'dark:focus:ring-[#0e79fd]',\n },\n busy: {\n // Enabled state - Light: #af460e, Dark: #f5a927\n border: 'border-[#af460e]',\n borderDark: 'dark:border-[#f5a927]',\n bgEnabled: 'bg-transparent',\n bgEnabledDark: 'dark:bg-transparent',\n // Actived state\n bgActive: 'bg-[#fed7aa]',\n bgActiveDark: 'dark:bg-[#5c3a1e]',\n borderActive: 'border-[#fed7aa]',\n borderActiveDark: 'dark:border-[#5c3a1e]',\n // Table and chairs - Light: #af460e, Dark: #f5a927\n table: 'bg-[#af460e]',\n tableDark: 'dark:bg-[#f5a927]',\n chair: 'bg-[#af460e]',\n chairDark: 'dark:bg-[#f5a927]',\n // Text (mismo color del estado - label está FUERA de la mesa según Figma)\n text: 'text-[#af460e]',\n textDark: 'dark:text-[#f5a927]',\n // Focus ring\n focusRing: 'focus:ring-[#f5a927]',\n focusRingDark: 'dark:focus:ring-[#af460e]',\n },\n reserved: {\n // Enabled state - Light: #7e22ce, Dark: #c084fc\n border: 'border-[#7e22ce]',\n borderDark: 'dark:border-[#c084fc]',\n bgEnabled: 'bg-transparent',\n bgEnabledDark: 'dark:bg-transparent',\n // Actived state\n bgActive: 'bg-[#e9d5ff]',\n bgActiveDark: 'dark:bg-[#3b1f5c]',\n borderActive: 'border-[#e9d5ff]',\n borderActiveDark: 'dark:border-[#3b1f5c]',\n // Table and chairs - Light: #7e22ce, Dark: #c084fc\n table: 'bg-[#7e22ce]',\n tableDark: 'dark:bg-[#c084fc]',\n chair: 'bg-[#7e22ce]',\n chairDark: 'dark:bg-[#c084fc]',\n // Text (mismo color del estado - label está FUERA de la mesa según Figma)\n text: 'text-[#7e22ce]',\n textDark: 'dark:text-[#c084fc]',\n // Focus ring\n focusRing: 'focus:ring-[#c084fc]',\n focusRingDark: 'dark:focus:ring-[#7e22ce]',\n },\n };\n\n // ===== CLASES DE FORMA (ESPECIFICACIONES EXACTAS DE FIGMA) =====\n const shapeClasses = {\n square: {\n container: 'rounded-[4px]',\n table: 'w-[64px] h-[64px] rounded-[4px]',\n },\n circle: {\n container: 'rounded-[9999px]',\n table: 'w-[64px] h-[64px] rounded-[9999px]',\n },\n rectangle: {\n container: 'rounded-[4px]',\n table: 'w-[80px] h-[64px] rounded-[4px]',\n },\n oval: {\n container: 'rounded-3xl',\n table: 'w-[80px] h-[64px] rounded-3xl',\n },\n };\n\n // ===== COMPONENTE SILLA (ESPECIFICACIONES EXACTAS DE FIGMA) =====\n const Chair: React.FC<{ rotation: number }> = ({ rotation }) => (\n <div\n className=\"w-[28px] h-[22px]\"\n style={{ transform: `rotate(${rotation}deg)` }}\n aria-hidden=\"true\"\n >\n {/* Respaldo (parte superior) - 72.73% height */}\n <div\n className={`\n absolute\n top-0\n left-0\n right-0\n h-[16px]\n rounded-t-[4px]\n ${statusColors[status].chair}\n ${statusColors[status].chairDark}\n `}\n />\n {/* Asiento (parte inferior) - 85.71% width, 63.64% height */}\n <div\n className={`\n absolute\n bottom-0\n left-[7.14%]\n right-[7.14%]\n h-[14px]\n rounded-b-[4px]\n ${statusColors[status].chair}\n ${statusColors[status].chairDark}\n `}\n />\n </div>\n );\n\n // ===== HANDLER DE CLICK =====\n const handleClick = () => {\n if (!disabled && onClick) {\n onClick();\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if ((e.key === 'Enter' || e.key === ' ') && !disabled && onClick) {\n e.preventDefault();\n onClick();\n }\n };\n\n // ===== CLASES DEL CONTAINER (160x160px según Figma) =====\n const containerClasses = [\n // Dimensiones exactas del container\n 'w-[160px]',\n 'h-[160px]',\n 'shrink-0',\n\n // Estructura\n 'relative',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'p-0',\n\n // Borde (2px según Figma)\n 'border-2',\n 'box-border',\n\n // Border radius (8px según Figma)\n 'rounded-[8px]',\n\n // Colores del borde y fondo según estado\n isActive ? statusColors[status].borderActive : statusColors[status].border,\n isActive ? statusColors[status].borderActiveDark : statusColors[status].borderDark,\n isActive ? statusColors[status].bgActive : statusColors[status].bgEnabled,\n isActive ? statusColors[status].bgActiveDark : statusColors[status].bgEnabledDark,\n\n // Focus rings adaptativos (siguiendo patrón de Button)\n 'focus:outline-hidden',\n 'focus:ring-2',\n statusColors[status].focusRing,\n statusColors[status].focusRingDark,\n 'focus:ring-offset-2',\n 'dark:focus:ring-offset-dark-bg-primary',\n\n // Transiciones\n 'transition-all',\n 'duration-150',\n\n // Interactividad\n onClick && !disabled ? 'cursor-pointer' : '',\n onClick && !disabled ? 'hover:scale-105' : '',\n onClick && !disabled ? 'active:scale-95' : '',\n disabled ? 'opacity-50 cursor-not-allowed' : '',\n\n // Clases adicionales\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== RENDER =====\n return (\n <button\n className={containerClasses}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n type=\"button\"\n aria-label={`Mesa ${tableNumber} - ${\n status === 'available' ? 'Disponible' : status === 'busy' ? 'Ocupada' : 'Reservada'\n }`}\n >\n {/* INNER CONTAINER (134x134px según Figma) */}\n <div className=\"flex flex-col gap-[4px] items-center justify-center w-[134px] h-[134px] shrink-0\">\n {/* FILA DE SILLAS SUPERIORES */}\n {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (\n <div className=\"flex gap-[4px] items-center justify-center shrink-0\">\n {chairs >= 6 && (\n <>\n <Chair rotation={0} />\n <Chair rotation={0} />\n </>\n )}\n {chairs === 2 && <Chair rotation={0} />}\n {chairs === 4 && <Chair rotation={0} />}\n </div>\n )}\n\n {/* FILA CENTRAL CON MESA Y SILLAS LATERALES */}\n <div className=\"flex gap-[4px] items-center justify-center shrink-0\">\n {/* COLUMNA IZQUIERDA - SILLAS */}\n {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (\n <div className=\"flex flex-col gap-[4px] items-start justify-center shrink-0\">\n {chairs >= 8 && (\n <>\n <Chair rotation={270} />\n <Chair rotation={270} />\n </>\n )}\n {(chairs === 4 || chairs === 6) && <Chair rotation={270} />}\n </div>\n )}\n\n {/* MESA (sin label - el label va fuera según Figma) */}\n <div className=\"flex flex-col gap-[4px] items-start justify-center shrink-0\">\n <div className=\"flex items-center shrink-0\">\n <div\n className={`\n ${shapeClasses[shape].table}\n ${statusColors[status].table}\n ${statusColors[status].tableDark}\n shrink-0\n `}\n />\n </div>\n </div>\n\n {/* COLUMNA DERECHA - SILLAS */}\n {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (\n <div className=\"flex flex-col gap-[4px] items-start justify-center shrink-0\">\n {chairs >= 8 && (\n <>\n <Chair rotation={90} />\n <Chair rotation={90} />\n </>\n )}\n {(chairs === 4 || chairs === 6) && <Chair rotation={90} />}\n </div>\n )}\n </div>\n\n {/* FILA DE SILLAS INFERIORES */}\n {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (\n <div className=\"flex gap-[4px] items-center justify-center shrink-0\">\n {chairs >= 6 && (\n <>\n <Chair rotation={180} />\n <Chair rotation={180} />\n </>\n )}\n {chairs === 2 && <Chair rotation={180} />}\n {chairs === 4 && <Chair rotation={180} />}\n </div>\n )}\n </div>\n\n {/* LABEL DE NÚMERO DE MESA - Debajo del conjunto mesa+sillas según Figma */}\n <div\n className={`\n flex\n flex-col\n justify-center\n leading-0\n not-italic\n text-ellipsis\n overflow-hidden\n min-w-full\n text-center\n whitespace-nowrap\n shrink-0\n text-[10px]\n font-normal\n ${statusColors[status].text}\n ${statusColors[status].textDark}\n `}\n >\n <p className=\"leading-[12px] text-ellipsis overflow-hidden\">\n Mesa {tableNumber}\n </p>\n {children}\n </div>\n </button>\n );\n};\n","import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type Theme = 'light' | 'dark';\n\ninterface ThemeContextType {\n theme: Theme;\n toggleTheme: () => void;\n setTheme: (theme: Theme) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: React.ReactNode;\n defaultTheme?: Theme;\n}\n\n/**\n * ThemeProvider - Proveedor de contexto para el tema de la aplicación\n *\n * Maneja el estado del tema (light/dark) y lo persiste en localStorage.\n * Aplica la clase 'dark' al elemento HTML root cuando el tema es dark.\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"light\">\n * <App />\n * </ThemeProvider>\n * ```\n */\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n defaultTheme = 'light'\n}) => {\n const [theme, setThemeState] = useState<Theme>(() => {\n // Intenta obtener el tema del localStorage\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('siesa-ui-theme') as Theme;\n return savedTheme || defaultTheme;\n }\n return defaultTheme;\n });\n\n useEffect(() => {\n // Aplica o remueve la clase 'dark' del elemento root\n const root = window.document.documentElement;\n\n if (theme === 'dark') {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n\n // Guarda el tema en localStorage\n localStorage.setItem('siesa-ui-theme', theme);\n }, [theme]);\n\n const toggleTheme = () => {\n setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));\n };\n\n const setTheme = (newTheme: Theme) => {\n setThemeState(newTheme);\n };\n\n return (\n <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>\n {children}\n </ThemeContext.Provider>\n );\n};\n\n/**\n * useTheme - Hook para acceder al contexto del tema\n *\n * @returns {ThemeContextType} Objeto con el tema actual y funciones para modificarlo\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const { theme, toggleTheme } = useTheme();\n *\n * return (\n * <button onClick={toggleTheme}>\n * Tema actual: {theme}\n * </button>\n * );\n * }\n * ```\n */\nexport const useTheme = (): ThemeContextType => {\n const context = useContext(ThemeContext);\n\n if (context === undefined) {\n throw new Error('useTheme debe ser usado dentro de un ThemeProvider');\n }\n\n return context;\n};\n"],"names":["Button","type","size","iconOnly","leftIcon","rightIcon","children","disabled","className","onClick","htmlType","fullWidth","ariaLabel","badge","badgeCount","badgeColor","rest","sizeClasses","iconSizeClasses","textSizeClasses","typeClasses","baseClasses","widthClass","buttonClasses","renderIcon","icon","jsx","renderContent","jsxs","Fragment","badgeColorClasses","badgeColors","renderBadge","Input","forwardRef","label","labelSecondary","helperText","error","errorMessage","id","props","ref","inputId","baseInputClasses","interactiveClasses","errorClasses","containerClasses","existingClassName","cloneElement","Textarea","description","resize","rows","textareaId","baseTextareaClasses","resizeClasses","Checkbox","checked","indeterminate","onChange","inputRef","useRef","combinedRef","checkboxId","useEffect","checkboxClasses","Radio","value","name","radioId","baseRadioClasses","checkedClasses","Switch","labelPosition","switchId","baseTrackClasses","getTrackStateClasses","getButtonClasses","baseButtonClasses","positionClass","trackClasses","LabelContent","SwitchInput","Avatar","src","alt","initials","containerSizeClasses","Divider","finalClasses","DescriptionList","term","details","columnClasses","Alert","title","actions","onCancel","onConfirm","cancelText","confirmText","actionButtons","Badge","color","count","colors","Quantity","controlledValue","defaultValue","min","max","linkText","onLinkClick","internalValue","setInternalValue","useState","isControlled","currentValue","handleValueChange","newValue","clampedValue","handleDecrement","handleIncrement","isDecrementDisabled","isIncrementDisabled","MinusIcon","PlusIcon","borderClass","hoverClass","focusClass","ChevronDownIcon","Dropdown","variant","items","controlledOpen","onOpenChange","menuClassName","placeholder","internalOpen","setInternalOpen","dropdownRef","isOpen","handleToggle","newOpen","handleClickOutside","event","handleEscape","handleItemClick","item","triggerClasses","menuClasses","index","DropdownDivider","DropdownHeading","DropdownItem","shortcut","selected","itemClasses","headingClasses","dividerClasses","Notification","colorClasses","dynamicAriaLabel","displayCount","ArrowLeftIcon","ArrowRightIcon","Pagination","currentPage","totalPages","onPageChange","backText","nextText","siblingCount","showBackButton","showNextButton","paginationRange","useMemo","totalBlocks","_","i","leftSiblingIndex","rightSiblingIndex","shouldShowLeftDots","shouldShowRightDots","firstPageIndex","lastPageIndex","leftItemCount","rightItemCount","rightRange","middleRange","handlePageChange","page","PageButton","isActive","buttonAriaLabel","isDots","ChevronUpDownIcon","CheckIcon","Select","options","showLabel","showDescription","menuHeader","triggerClassName","required","menuPosition","setIsOpen","selectedValue","setSelectedValue","focusedIndex","setFocusedIndex","containerRef","triggerRef","menuRef","handleKeyDown","prev","handleSelect","selectedOption","opt","toggleMenu","option","finalTriggerClasses","finalMenuClasses","baseMenuItemClasses","getMenuItemClasses","isSelected","isFocused","hoverClasses","disabledClasses","iconClasses","checkIconClasses","ChevronUpIcon","TableHeader","column","sortable","sorted","sortDirection","onSort","combinedClasses","e","TableCell","align","width","isStriped","rowIndex","alignClasses","stripedBg","previousLabel","nextLabel","pageNumbers","pages","Table","columns","data","showBorder","showShadow","externalSortColumn","externalSortDirection","emptyMessage","loading","loadingRows","pagination","internalSortColumn","setInternalSortColumn","internalSortDirection","setInternalSortDirection","sortColumn","handleSort","columnAccessor","newDirection","getCellValue","row","accessor","colIndex","content","Tab","active","contentBaseClasses","contentStateClasses","textClasses","badgeClasses","indicatorClasses","contentFinalClasses","Tabs","activeId","defaultActiveId","internalActiveId","setInternalActiveId","currentActiveId","handleTabClick","itemWidthClass","ShoppingCartIcon","BellIcon","MagnifyingGlassIcon","ExclamationTriangleIcon","ArrowLeftStartOnRectangleIcon","Navbar","logo","productName","environmentBadge","userDropdown","notifications","hideActionButtons","leadingAction","siesaLogo","showBusinessLogo","showSiesaLogoLeading","showSiesaLogoTrailing","onNavigationClick","onSearchClick","onCartClick","onNotificationsClick","actionButtonClasses","navigationButtonClasses","isMobile","isDesktop","isTablet","isResponsive","NavigationButton","buttonContent","BusinessLogo","logoContent","SiesaLogoLeading","logoFull","logoMobile","SiesaLogoTrailing","responsive","dividerContent","ProductName","nameContent","EnvironmentBadge","SearchButton","CartButton","NotificationsButton","UserDropdown","dropdownButtonClasses","renderFullDropdown","NavigationBar","activeItemId","onItemClick","renderItem","itemContainerClasses","iconContainerClasses","labelClasses","destinationsClasses","ConventionIcon","lightColor","darkColor","POSConvention","status","config","XMarkIcon","CalendarIcon","NoSymbolIcon","UsersIcon","POSLocationButton","locationName","state","capacity","StatusIcon","backgroundClasses","capacityText","POSNumberButton","border","POSProductButton","image","POSProductCard","price","buttonText","onAddClick","onCardClick","stateClasses","cardClasses","handleCardClick","handleButtonClick","TrashIcon","POSProductSidebarItems","categoryLabel","categoryColor","productRef","descriptionItems","quantity","minQuantity","maxQuantity","onQuantityChange","onDelete","deleteIcon","categoryColorClasses","handleQuantityChange","newQuantity","handleDelete","POSTable","tableNumber","shape","chairs","showChairs","statusColors","shapeClasses","Chair","rotation","handleClick","ThemeContext","createContext","ThemeProvider","defaultTheme","theme","setThemeState","root","toggleTheme","setTheme","newTheme","useTheme","context","useContext"],"mappings":"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"}
1
+ {"version":3,"file":"siesa-ui-kit.mjs","sources":["../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/components/Textarea/Textarea.tsx","../src/components/Checkbox/Checkbox.tsx","../src/components/Radio/Radio.tsx","../src/components/Switch/Switch.tsx","../src/components/Avatar/Avatar.tsx","../src/components/Divider/Divider.tsx","../src/components/DescriptionList/DescriptionList.tsx","../src/components/Alert/Alert.tsx","../src/components/Badge/Badge.tsx","../src/components/Quantity/Quantity.tsx","../src/components/Dropdown/icons.tsx","../src/components/Dropdown/Dropdown.tsx","../src/components/Notification/Notification.tsx","../src/components/Pagination/icons.tsx","../src/components/Pagination/Pagination.tsx","../src/components/Select/icons.tsx","../src/components/Select/Select.tsx","../src/components/Table/Table.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Navbar/icons.tsx","../src/components/Navbar/Navbar.tsx","../src/components/NavigationBar/NavigationBar.tsx","../src/components/POSConvention/icons.tsx","../src/components/POSConvention/POSConvention.tsx","../src/components/POSLocationButton/icons.tsx","../src/components/POSLocationButton/POSLocationButton.tsx","../src/components/POSNumberButton/POSNumberButton.tsx","../src/components/POSProductButton/POSProductButton.tsx","../src/components/POSProductCard/icons.tsx","../src/components/POSProductCard/POSProductCard.tsx","../src/components/POSProductSidebarItems/icons.tsx","../src/components/POSProductSidebarItems/POSProductSidebarItems.tsx","../src/components/POSTable/POSTable.tsx","../src/context/ThemeContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { ButtonProps, ButtonType } from './Button.types';\n\n/**\n * Componente Button del sistema de diseño Siesa\n *\n * Implementación pixel-perfect basada en Figma (node 4001-17240)\n * con soporte completo para todos los estados, tamaños y variantes.\n *\n * **Variantes (type):**\n * - `default`: Botón primario con fondo sólido (#0e79fd) y borde (#3c9bf6)\n * - Sombra interna para efecto de profundidad\n * - Usar para acciones principales (Guardar, Enviar, Confirmar)\n * - `outline-solid`: Botón secundario con borde (#93d1fd) y shadow-xs\n * - Usar para acciones secundarias (Cancelar, Volver)\n * - `plain`: Botón terciario sin borde visible\n * - Hover overlay sutil\n * - Usar para acciones sutiles (Cerrar, Ver más, Links)\n *\n * **Tamaños (size):**\n * - `xs` (24px): Espacios muy compactos, inline actions. Padding: 8px h, 4px v\n * - `sm` (28px): Barras de herramientas, acciones secundarias. Padding: 8px h, 4px v\n * - `base` (32px): Tamaño estándar para la mayoría de casos. Padding: 10px h, 6px v\n * - `l` (36px): Botones destacados, CTAs. Padding: 12px h, 8px v\n * - `xl` (40px): Heroes, landing pages. Padding: 16px h, 8px v\n *\n * **Estados:**\n * - `default`: Estado normal con colores base\n * - `hover`: Overlay visual sutil (bg-primary-custom-500 para default)\n * - `focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)\n * - `active`: Scale animation (scale-95) para feedback táctil\n * - `disabled`: Opacity 50% con pointer-events-none\n *\n * **Badges de notificación:**\n * - `badge`: Muestra un dot de notificación en la esquina superior derecha\n * - `badgeCount`: Muestra un badge con número (99+ para >99)\n * - `badgeColor`: Color del badge (por defecto: red - #b91c1c)\n *\n * **Especificaciones de Figma:**\n * - Border radius: 6px (rounded-md)\n * - Tipografía: Label Small (14px Bold) para sm/base/l/xl, Label Tiny (12px Bold) para xs\n * - Iconos: 16x16px en todos los tamaños\n * - Gap entre elementos: 8px (xs/sm/base), 12px (l/xl)\n *\n * **Dark Mode:**\n * Los botones invierten colores en dark mode:\n * - Default: fondo celeste claro (#bfe2fe), texto azul (#0e79fd), borde celeste (#93d1fd)\n * - Outline: texto celeste (#93d1fd), borde azul (#0f6ae3)\n * - Plain: texto celeste (#93d1fd), hover overlay blanco 20%\n * - Focus ring adaptativo con offset oscuro\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/shadows.md - Sistema de sombras (shadow-button-inset, shadow-sm)\n * @see docs/typography.md - Sistema tipográfico (Label Small/Tiny)\n * @see docs/spacing.md - Sistema de espaciado\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240 - Diseño Figma\n *\n * @example\n * ```tsx\n * // Botón primario con icono\n * <Button type=\"default\" size=\"base\" leftIcon={<SaveIcon />}>\n * Guardar\n * </Button>\n *\n * // Botón secundario\n * <Button type=\"outline\" size=\"base\">\n * Cancelar\n * </Button>\n *\n * // Botón solo icono para barra de herramientas\n * <Button type=\"plain\" size=\"sm\" iconOnly leftIcon={<CloseIcon />} ariaLabel=\"Cerrar\" />\n *\n * // Botón con badge de notificación (dot)\n * <Button type=\"default\" size=\"base\" badge>\n * Notificaciones\n * </Button>\n *\n * // Botón con badge contador\n * <Button type=\"default\" size=\"base\" badgeCount={5} badgeColor=\"red\">\n * Mensajes\n * </Button>\n * ```\n */\nexport const Button: React.FC<ButtonProps> = ({\n type = 'default',\n size = 'base',\n iconOnly = false,\n leftIcon,\n rightIcon,\n children,\n disabled = false,\n className = '',\n onClick,\n htmlType = 'button',\n fullWidth = false,\n ariaLabel,\n badge = false,\n badgeCount,\n badgeColor = 'red',\n ...rest\n}) => {\n // ===== CLASES DE TAMAÑO =====\n const sizeClasses = {\n xs: iconOnly ? 'h-6 w-6 p-1' : 'h-6 py-1 px-2 gap-2',\n sm: iconOnly ? 'h-7 w-7 p-1.5' : 'h-7 py-1 px-2 gap-2',\n base: iconOnly ? 'h-8 w-8 p-2' : 'h-8 py-1.5 px-2.5 gap-2',\n l: iconOnly ? 'h-9 w-9 p-2.5' : 'h-9 py-2 px-3 gap-3',\n xl: iconOnly ? 'h-10 w-10 p-3' : 'h-10 py-2 px-4 gap-3',\n };\n\n // ===== CLASES DE TAMAÑO DE ICONO =====\n const iconSizeClasses = {\n xs: 'w-4 h-4',\n sm: 'w-4 h-4',\n base: 'w-4 h-4',\n l: 'w-4 h-4',\n xl: 'w-4 h-4',\n };\n\n // ===== CLASES DE TAMAÑO DE TEXTO =====\n // Usando el sistema de tipografía Label del design system (typography.md)\n const textSizeClasses = {\n xs: 'text-xs', // Label Tiny - 12px\n sm: 'text-sm', // Label Small - 14px\n base: 'text-sm', // Label Small - 14px (default para base)\n l: 'text-sm', // Label Small - 14px (corregido según Figma)\n xl: 'text-sm', // Label Small - 14px (corregido según Figma)\n };\n\n // ===== CLASES DE TIPO (Default, Outline, Plain) =====\n // Especificaciones de Figma node 4001-17240\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n // Dark mode: Los botones invierten colores (fondo claro, texto oscuro)\n // - Light: fondo #0e79fd (azul), texto #eff8ff (blanco)\n // - Dark: fondo #bfe2fe (celeste claro), texto #0e79fd (azul)\n const typeClasses: Record<ButtonType, string> = {\n default: `\n bg-primary-custom-600\n text-primary-inverse-content\n border\n border-primary-inverse-border\n shadow-button-inset\n hover:bg-primary-custom-500\n active:scale-95\n transition-all\n duration-150\n dark:bg-dark-bg-inverse\n dark:text-dark-content-inverse\n dark:border-dark-border-inverse\n dark:hover:bg-dark-bg-inverse/90\n `,\n outline: `\n bg-transparent\n text-primary-custom-600\n border\n border-primary-custom-300\n shadow-xs\n hover:bg-primary-custom-100\n active:scale-95\n transition-all\n duration-150\n dark:text-dark-content-custom\n dark:border-dark-border-custom\n dark:hover:bg-dark-bg-custom/20\n `,\n 'outline-solid': `\n bg-transparent\n text-primary-custom-600\n border\n border-primary-custom-300\n shadow-xs\n hover:bg-primary-custom-100\n active:scale-95\n transition-all\n duration-150\n dark:text-dark-content-custom\n dark:border-dark-border-custom\n dark:hover:bg-dark-bg-custom/20\n `,\n plain: `\n bg-transparent\n text-primary-custom-600\n border\n border-transparent\n hover:bg-hover-overlay\n active:scale-95\n transition-all\n duration-150\n dark:text-dark-content-custom\n dark:hover:bg-hover-overlay-dark\n `,\n };\n\n // ===== CLASES BASE =====\n // Especificaciones de Figma: Focus ring = 4px spread primary-custom-400 + 2px offset primary-custom-100\n // Dark mode: Focus ring adaptativo con offset oscuro\n const baseClasses = `\n inline-flex\n items-center\n justify-center\n rounded-md\n font-bold\n whitespace-nowrap\n focus:outline-hidden\n focus:ring-4\n focus:ring-primary-custom-400\n focus:ring-offset-2\n focus:ring-offset-primary-custom-100\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n disabled:opacity-50\n disabled:cursor-not-allowed\n disabled:pointer-events-none\n `;\n\n // ===== CLASE FULL WIDTH =====\n const widthClass = fullWidth ? 'w-full' : '';\n\n // ===== COMBINAR TODAS LAS CLASES =====\n const buttonClasses = [\n baseClasses,\n sizeClasses[size],\n typeClasses[type],\n widthClass,\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== RENDERIZAR ICONO =====\n const renderIcon = (icon: React.ReactNode) => {\n if (!icon) return null;\n return (\n <span className={`inline-flex items-center justify-center ${iconSizeClasses[size]}`}>\n {icon}\n </span>\n );\n };\n\n // ===== RENDERIZAR CONTENIDO =====\n const renderContent = () => {\n // Si es iconOnly, solo mostrar leftIcon\n if (iconOnly) {\n return renderIcon(leftIcon);\n }\n\n // Si tiene texto y/o iconos\n return (\n <>\n {leftIcon && renderIcon(leftIcon)}\n {children && <span className={textSizeClasses[size]}>{children}</span>}\n {rightIcon && renderIcon(rightIcon)}\n </>\n );\n };\n\n // ===== MAPA DE COLORES DE BADGE =====\n // Basado en el componente Badge existente\n const badgeColorClasses: Record<string, { bg: string; text: string }> = {\n zinc: { bg: 'bg-zinc-600', text: 'text-white' },\n red: { bg: 'bg-red-700', text: 'text-white' },\n orange: { bg: 'bg-orange-700', text: 'text-white' },\n amber: { bg: 'bg-amber-700', text: 'text-white' },\n yellow: { bg: 'bg-yellow-700', text: 'text-white' },\n lime: { bg: 'bg-lime-700', text: 'text-white' },\n green: { bg: 'bg-green-700', text: 'text-white' },\n emerald: { bg: 'bg-emerald-700', text: 'text-white' },\n teal: { bg: 'bg-teal-700', text: 'text-white' },\n cyan: { bg: 'bg-cyan-700', text: 'text-white' },\n sky: { bg: 'bg-sky-700', text: 'text-white' },\n blue: { bg: 'bg-blue-700', text: 'text-white' },\n indigo: { bg: 'bg-indigo-700', text: 'text-white' },\n violet: { bg: 'bg-violet-700', text: 'text-white' },\n purple: { bg: 'bg-purple-700', text: 'text-white' },\n fuchsia: { bg: 'bg-fuchsia-700', text: 'text-white' },\n pink: { bg: 'bg-pink-700', text: 'text-white' },\n rose: { bg: 'bg-rose-700', text: 'text-white' },\n primary: { bg: 'bg-primary-custom-600', text: 'text-white' },\n secondary: { bg: 'bg-zinc-600', text: 'text-white' },\n tertiary: { bg: 'bg-zinc-600', text: 'text-white' },\n };\n\n const badgeColors = badgeColorClasses[badgeColor] || badgeColorClasses.red;\n\n // ===== RENDERIZAR BADGE =====\n const renderBadge = () => {\n // Si no hay badge ni badgeCount, no renderizar nada\n if (!badge && badgeCount === undefined) return null;\n\n // Si hay badgeCount, renderizar badge con número\n if (badgeCount !== undefined) {\n return (\n <span\n className={`\n absolute\n -top-1\n -right-1\n flex\n items-center\n justify-center\n min-w-[16px]\n h-4\n px-1\n rounded-full\n text-[10px]\n font-bold\n leading-none\n ${badgeColors.bg}\n ${badgeColors.text}\n pointer-events-none\n `.trim().replace(/\\s+/g, ' ')}\n aria-label={`${badgeCount} notificaciones`}\n >\n {badgeCount > 99 ? '99+' : badgeCount}\n </span>\n );\n }\n\n // Si solo hay badge (sin número), renderizar dot\n return (\n <span\n className={`\n absolute\n -top-1\n -right-1\n w-2\n h-2\n rounded-full\n ${badgeColors.bg}\n pointer-events-none\n `.trim().replace(/\\s+/g, ' ')}\n aria-label=\"Notificación\"\n />\n );\n };\n\n return (\n <button\n type={htmlType}\n className={`${buttonClasses} ${(badge || badgeCount !== undefined) ? 'relative' : ''}`}\n disabled={disabled}\n onClick={onClick}\n aria-label={ariaLabel}\n {...rest}\n >\n {renderContent()}\n {renderBadge()}\n </button>\n );\n};\n","import React, { forwardRef, cloneElement } from 'react';\nimport type { InputProps } from './Input.types';\n\n/**\n * Input - Componente de campo de entrada del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Tokens de color consistentes con la documentación\n * - Sombra base para inputs con focus\n * - Estados hover, focus, disabled y error completos\n * - Typography: Paragraph Regular para texto, Label Bold para labels\n *\n * Campo de entrada de texto con soporte para:\n * - Estados: default, hover, focus, filled, disabled\n * - Validación con mensajes de error\n * - Iconos izquierdo y derecho\n * - Label y helper text\n * - Dark mode completo\n * - Accesibilidad completa\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/shadows.md - Sistema de sombras\n * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Input\n * label=\"Email\"\n * placeholder=\"tu@email.com\"\n * leftIcon={<EnvelopeIcon />}\n * helperText=\"Ingresa tu correo electrónico\"\n * />\n * ```\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n label,\n labelSecondary,\n helperText,\n error = false,\n errorMessage,\n leftIcon,\n rightIcon,\n fullWidth = false,\n className = '',\n disabled = false,\n id,\n ...props\n },\n ref\n ) => {\n // Generar ID único si no se proporciona\n const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;\n\n // ===== CLASES BASE DEL INPUT =====\n // Usando el sistema tipográfico Paragraph Regular (14px = text-sm)\n // Border radius rounded-md (6px) consistente con Button\n const baseInputClasses = `\n w-full\n px-3\n py-1.5\n text-sm\n leading-6\n font-normal\n text-content-primary\n bg-bg-primary\n border\n border-border-primary\n rounded-md\n outline-hidden\n transition-all\n duration-150\n placeholder:text-content-tertiary\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n dark:text-dark-content-primary\n dark:placeholder:text-dark-content-tertiary\n `;\n\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n // Focus rings adaptativos siguiendo el patrón de Button\n const interactiveClasses = !disabled\n ? `\n hover:border-primary-custom-600\n focus:border-primary-custom-600\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:hover:border-dark-border-custom\n dark:focus:border-dark-border-custom\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n `\n : `\n opacity-50\n cursor-not-allowed\n bg-bg-secondary\n dark:bg-dark-bg-secondary\n `;\n\n // ===== CLASES PARA ESTADO DE ERROR =====\n // Los colores de error son los mismos en light y dark mode\n const errorClasses = error\n ? `\n border-error-border!\n focus:ring-error-border/30!\n focus:ring-offset-2!\n dark:border-error-border!\n dark:focus:ring-error-border/30!\n dark:focus:ring-offset-dark-bg-primary!\n `\n : '';\n\n // ===== CLASES DEL CONTENEDOR =====\n const containerClasses = fullWidth ? 'w-full' : 'w-[265px]';\n\n // ===== RENDERIZAR ICONOS =====\n // Clonar iconos con estilos apropiados y dark mode completo\n const renderIcon = (icon: React.ReactElement | undefined) => {\n if (!icon) return null;\n const existingClassName = (icon.props as any).className || '';\n return cloneElement(icon as React.ReactElement<any>, {\n className: `w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary ${existingClassName}`,\n });\n };\n\n return (\n <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>\n {/* Label */}\n {label && (\n <label\n htmlFor={inputId}\n className=\"flex items-center w-full font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary\"\n >\n <span className=\"flex-1\">{label}</span>\n {labelSecondary && (\n <span className=\"text-xs leading-4 text-primary-custom-600 dark:text-primary-custom-600\">\n {labelSecondary}\n </span>\n )}\n </label>\n )}\n\n {/* Input Container */}\n <div className=\"relative flex items-center\">\n {/* Left Icon */}\n {leftIcon && (\n <div className=\"absolute left-3 pointer-events-none\">\n {renderIcon(leftIcon)}\n </div>\n )}\n\n {/* Input Field */}\n <input\n ref={ref}\n id={inputId}\n disabled={disabled}\n className={`\n ${baseInputClasses}\n ${interactiveClasses}\n ${errorClasses}\n ${leftIcon ? 'pl-9' : ''}\n ${rightIcon ? 'pr-9' : ''}\n `.trim().replace(/\\s+/g, ' ')}\n {...props}\n />\n\n {/* Right Icon */}\n {rightIcon && (\n <div className=\"absolute right-3 pointer-events-none\">\n {renderIcon(rightIcon)}\n </div>\n )}\n </div>\n\n {/* Helper Text or Error Message */}\n {(helperText || errorMessage) && (\n <p\n className={`\n text-xs\n leading-5\n ${\n error\n ? 'text-error-content dark:text-error-content'\n : 'text-content-tertiary dark:text-dark-content-tertiary'\n }\n `.trim().replace(/\\s+/g, ' ')}\n >\n {error && errorMessage ? errorMessage : helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = 'Input';\n","import { forwardRef } from 'react';\nimport type { TextareaProps } from './Textarea.types';\n\n/**\n * Textarea - Componente de área de texto del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Tokens de color consistentes con la documentación\n * - Estados hover, focus, disabled y error completos\n * - Typography: Paragraph Base (16px) para texto\n *\n * Campo de entrada de texto multi-línea con soporte para:\n * - Estados: default, hover, focus, filled, disabled\n * - Validación con mensajes de error\n * - Label, description y helper text\n * - Resize vertical, horizontal, both o none\n * - Dark mode completo\n * - Accesibilidad completa\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/shadows.md - Sistema de sombras\n * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Textarea\n * label=\"About\"\n * description=\"Tell us about yourself\"\n * placeholder=\"Write a few sentences...\"\n * helperText=\"Minimum 50 characters\"\n * />\n * ```\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n (\n {\n label,\n description,\n helperText,\n error = false,\n errorMessage,\n fullWidth = false,\n resize = 'vertical',\n className = '',\n disabled = false,\n id,\n rows = 4,\n ...props\n },\n ref\n ) => {\n // Generar ID único si no se proporciona\n const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;\n\n // ===== CLASES BASE DEL TEXTAREA =====\n // Usando el sistema tipográfico Paragraph Base (16px = text-base)\n // Border radius rounded-lg (8px) según especificaciones de Figma\n // Padding: px-3 (12px) izquierda, pr-1.5 (6px) derecha para el indicador de resize\n const baseTextareaClasses = `\n w-full\n px-3\n pr-1.5\n py-1.5\n text-base\n leading-6\n font-normal\n bg-bg-primary\n border\n border-border-primary\n rounded-lg\n outline-hidden\n transition-all\n duration-150\n placeholder:text-content-tertiary\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n dark:text-dark-content-primary\n dark:placeholder:text-dark-content-tertiary\n `;\n\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n // Hover: borde más opaco (zinc-400) según especificaciones de Figma\n // Focus: solo border-2 sin ring, según especificaciones de Figma\n const interactiveClasses = !disabled\n ? `\n hover:border-zinc-400\n focus:border-2\n focus:border-primary-custom-600\n dark:hover:border-zinc-500\n dark:focus:border-2\n dark:focus:border-dark-border-custom\n `\n : `\n opacity-50\n cursor-not-allowed\n bg-bg-secondary\n dark:bg-dark-bg-secondary\n `;\n\n // ===== CLASES PARA ESTADO DE ERROR =====\n // Los colores de error son los mismos en light y dark mode\n // Focus en error: solo border-2 sin ring, según especificaciones de Figma\n const errorClasses = error\n ? `\n border-error-border!\n focus:border-2!\n focus:border-error-border!\n dark:border-error-border!\n dark:focus:border-2!\n dark:focus:border-error-border!\n `\n : '';\n\n // ===== CLASES DE RESIZE =====\n const resizeClasses =\n resize === 'none'\n ? 'resize-none'\n : resize === 'vertical'\n ? 'resize-y'\n : resize === 'horizontal'\n ? 'resize-x'\n : 'resize';\n\n // ===== CLASES DEL CONTENEDOR =====\n // Ancho por defecto: 312px (según especificaciones de Figma)\n const containerClasses = fullWidth ? 'w-full' : 'w-[312px]';\n\n return (\n <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>\n {/* Label and Description */}\n {(label || description) && (\n <div className=\"flex flex-col gap-1 w-full\">\n {label && (\n <label\n htmlFor={textareaId}\n className=\"font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary\"\n >\n {label}\n </label>\n )}\n {description && (\n <p className=\"text-sm leading-5 text-content-secondary dark:text-dark-content-secondary\">\n {description}\n </p>\n )}\n </div>\n )}\n\n {/* Textarea Field */}\n <textarea\n ref={ref}\n id={textareaId}\n disabled={disabled}\n rows={rows}\n className={`\n ${baseTextareaClasses}\n ${interactiveClasses}\n ${errorClasses}\n ${resizeClasses}\n `.trim().replace(/\\s+/g, ' ')}\n {...props}\n />\n\n {/* Helper Text or Error Message */}\n {(helperText || errorMessage) && (\n <p\n className={`\n text-sm\n leading-5\n text-content-tertiary\n dark:text-dark-content-tertiary\n `.trim().replace(/\\s+/g, ' ')}\n >\n {error && errorMessage ? errorMessage : helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nTextarea.displayName = 'Textarea';\n","import { forwardRef, useEffect, useRef } from 'react';\nimport type { CheckboxProps } from './Checkbox.types';\n\n/**\n * Checkbox del sistema de diseño Siesa\n *\n * Componente de checkbox con soporte completo para estados interactivos,\n * indeterminate, y dark mode pixel-perfect según especificaciones de Figma.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Sombra button-inset para estado checked\n * - Type safety con TypeScript estricto\n * - Accesibilidad con input nativo y ARIA\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label/Paragraph)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Checkbox\n * label=\"Show on Events Page\"\n * description=\"Make this event visible on your profile\"\n * checked={true}\n * onChange={(e) => console.log(e.target.checked)}\n * />\n * ```\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n label,\n description,\n checked = false,\n indeterminate = false,\n disabled = false,\n className = '',\n id,\n onChange,\n ...props\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const combinedRef = (ref as any) || inputRef;\n\n // Generar ID único si no se proporciona\n const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;\n\n // Manejar el estado indeterminate\n useEffect(() => {\n if (combinedRef.current) {\n combinedRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate, combinedRef]);\n\n // ===== CLASES BASE DEL CHECKBOX =====\n const baseCheckboxClasses = `\n w-4\n h-4\n rounded\n border\n border-border-primary\n bg-bg-primary\n transition-all\n duration-150\n flex\n items-center\n justify-center\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n `;\n\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\n const interactiveClasses = !disabled\n ? (checked || indeterminate)\n ? `\n peer-hover:border-[#50a5f7]\n peer-focus:ring-2\n peer-focus:ring-primary-custom-400/20\n peer-focus:border-primary-custom-600\n dark:peer-hover:border-[#50a5f7]\n dark:peer-focus:border-dark-border-custom\n dark:peer-focus:ring-dark-border-custom/20\n `\n : `\n peer-hover:border-[#b6b6b9]\n peer-focus:ring-2\n peer-focus:ring-primary-custom-400/20\n peer-focus:border-primary-custom-600\n dark:peer-hover:border-[#b6b6b9]\n dark:peer-focus:border-dark-border-custom\n dark:peer-focus:ring-dark-border-custom/20\n `\n : `\n opacity-50\n cursor-not-allowed\n `;\n\n // ===== CLASES PARA ESTADO CHECKED/INDETERMINATE =====\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n const checkedClasses = checked || indeterminate\n ? `\n bg-primary-custom-600!\n border-primary-custom-500!\n shadow-button-inset\n dark:bg-dark-bg-inverse!\n dark:border-dark-bg-inverse!\n `\n : '';\n\n // ===== COMBINAR TODAS LAS CLASES DEL CHECKBOX =====\n const checkboxClasses = [\n baseCheckboxClasses,\n interactiveClasses,\n checkedClasses,\n disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div className={`inline-flex gap-3 items-start ${className}`}>\n {/* Checkbox Input Container */}\n <div className=\"flex items-center justify-center h-5 w-4 shrink-0\">\n {/* Native Input (hidden but accessible) */}\n <input\n ref={combinedRef}\n type=\"checkbox\"\n id={checkboxId}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n className=\"peer sr-only\"\n {...props}\n />\n\n {/* Custom Checkbox Visual */}\n <label htmlFor={checkboxId} className={checkboxClasses}>\n {/* Check Icon - Usar primary-inverse-content para consistencia */}\n {checked && !indeterminate && (\n <svg\n className=\"w-3 h-3 text-primary-inverse-content pointer-events-none\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 3L4.5 8.5L2 6\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )}\n\n {/* Indeterminate Icon (minus) - Usar primary-inverse-content */}\n {indeterminate && (\n <svg\n className=\"w-3 h-3 text-primary-inverse-content pointer-events-none\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2 6H10\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </svg>\n )}\n </label>\n </div>\n\n {/* Label and Description */}\n {(label || description) && (\n <label\n htmlFor={checkboxId}\n className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\n }`}\n >\n {/* Label - Label/Small (14px, Bold) */}\n {label && (\n <span className=\"font-bold text-content-primary dark:text-dark-content-primary\">\n {label}\n </span>\n )}\n {/* Description - Paragraph/Small (14px, Regular) */}\n {description && (\n <span className=\"font-normal text-content-secondary dark:text-content-secondary\">\n {description}\n </span>\n )}\n </label>\n )}\n </div>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n","import { forwardRef } from 'react';\nimport type { RadioProps } from './Radio.types';\n\n/**\n * Radio - Componente de radio button del sistema de diseño Siesa\n *\n * Campo de selección única diseñado para cumplir con las especificaciones\n * de Figma con soporte completo para dark mode y accesibilidad.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con keyboard navigation y ARIA\n * - Inner shadow en estado checked según especificaciones Figma\n *\n * Estados soportados:\n * - Default, Hover, Focus, Disabled\n * - Checked / Unchecked\n * - Label y description opcionales\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Radio simple\n * <Radio\n * label=\"Allow tickets to be resold\"\n * description=\"Customers can resell or transfer their tickets\"\n * value=\"resell\"\n * name=\"ticketOptions\"\n * checked={true}\n * onChange={(e) => console.log(e.target.checked)}\n * />\n *\n * // Radio group\n * <div>\n * <Radio label=\"Option 1\" name=\"group\" value=\"1\" checked={selected === \"1\"} onChange={handleChange} />\n * <Radio label=\"Option 2\" name=\"group\" value=\"2\" checked={selected === \"2\"} onChange={handleChange} />\n * </div>\n * ```\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n label,\n description,\n checked = false,\n disabled = false,\n className = '',\n id,\n onChange,\n value,\n name,\n ...props\n },\n ref\n ) => {\n // Generar ID único si no se proporciona\n const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;\n\n // ===== CLASES BASE DEL RADIO BUTTON =====\n const baseRadioClasses = `\n w-4\n h-4\n rounded-full\n border\n border-border-primary\n bg-bg-primary\n transition-all\n duration-150\n flex\n items-center\n justify-center\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n `;\n\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\n const interactiveClasses = !disabled\n ? `\n peer-hover:border-primary-custom-600\n peer-focus:ring-2\n peer-focus:ring-primary-custom-400\n peer-focus:border-primary-custom-600\n dark:peer-hover:border-dark-border-custom\n dark:peer-focus:ring-dark-border-custom\n dark:peer-focus:border-dark-border-custom\n `\n : `\n opacity-50\n cursor-not-allowed\n `;\n\n // ===== CLASES PARA CHECKED STATE =====\n // Según Figma: bg #0e79fd, border #3c9bf6, inner shadow\n const checkedClasses = checked\n ? `\n bg-primary-custom-600!\n border-primary-inverse-border!\n shadow-button-inset\n dark:bg-dark-bg-inverse!\n dark:border-dark-bg-inverse!\n `\n : '';\n\n return (\n <div className={`flex gap-3 items-start ${className}`}>\n {/* Radio Input Container */}\n <div className=\"flex items-center justify-center h-5 w-4 shrink-0\">\n {/* Native Input (hidden but accessible) */}\n <input\n ref={ref}\n type=\"radio\"\n id={radioId}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n value={value}\n name={name}\n className=\"peer sr-only\"\n {...props}\n />\n\n {/* Custom Radio Visual */}\n <label\n htmlFor={radioId}\n className={`\n ${baseRadioClasses}\n ${interactiveClasses}\n ${checkedClasses}\n ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}\n `.trim().replace(/\\s+/g, ' ')}\n >\n {/* Inner Circle (checked state) - 6px white dot según Figma */}\n {checked && (\n <div className=\"w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse\" />\n )}\n </label>\n </div>\n\n {/* Label and Description */}\n {(label || description) && (\n <label\n htmlFor={radioId}\n className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\n }`}\n >\n {label && (\n <span className=\"font-bold text-content-primary dark:text-dark-content-primary\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"font-normal text-content-secondary dark:text-content-secondary\">\n {description}\n </span>\n )}\n </label>\n )}\n </div>\n );\n }\n);\n\nRadio.displayName = 'Radio';\n","import { forwardRef } from 'react';\nimport type { SwitchProps } from './Switch.types';\n\n/**\n * Switch - Componente de switch del sistema de diseño Siesa\n *\n * Campo de activación/desactivación con soporte para:\n * - Estados: default, hover, focus, disabled\n * - On, off\n * - Label y description opcionales\n * - Posición del label: leading (izquierda) o trailing (derecha)\n * - Animación suave de transición\n * - Dark mode completo\n * - Accesibilidad completa\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Focus ring con shadow especial según Figma\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Label a la izquierda (default)\n * <Switch\n * label=\"Permitir inserción\"\n * description=\"Permite que otros inserten los detalles de tu evento.\"\n * checked={true}\n * onChange={(e) => console.log(e.target.checked)}\n * />\n *\n * // Label a la derecha\n * <Switch\n * label=\"Activar notificaciones\"\n * labelPosition=\"trailing\"\n * checked={false}\n * onChange={(e) => console.log(e.target.checked)}\n * />\n * ```\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n (\n {\n label,\n description,\n labelPosition = 'leading',\n checked = false,\n disabled = false,\n className = '',\n id,\n onChange,\n ariaLabel,\n ...props\n },\n ref\n ) => {\n // Generar ID único si no se proporciona\n const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;\n\n // ===== CLASES BASE DEL TRACK =====\n const baseTrackClasses = `\n w-8\n h-5\n rounded-xl\n border\n overflow-hidden\n relative\n transition-all\n duration-200\n `;\n\n // ===== CLASES DE ESTADO DEL TRACK =====\n const getTrackStateClasses = () => {\n if (disabled) {\n return checked\n ? `\n bg-primary-custom-600\n border-primary-inverse-border\n opacity-50\n cursor-not-allowed\n dark:bg-primary-custom-600\n dark:border-primary-inverse-border\n `\n : `\n bg-[#fafafa]\n border-border-primary\n opacity-50\n cursor-not-allowed\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n `;\n }\n\n return checked\n ? `\n bg-primary-custom-600\n border-primary-inverse-border\n cursor-pointer\n peer-hover:border-[#307cc5]\n peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n dark:bg-primary-custom-600\n dark:border-primary-inverse-border\n dark:peer-hover:border-[#307cc5]\n dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n `\n : `\n bg-[#fafafa]\n border-border-primary\n cursor-pointer\n peer-hover:border-[#b6b6b9]\n peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n dark:peer-hover:border-[#b6b6b9]\n dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n `;\n };\n\n // ===== CLASES DEL BOTÓN (CÍRCULO) =====\n const getButtonClasses = () => {\n const baseButtonClasses = `\n absolute\n w-4\n h-4\n bg-white\n rounded-[10px]\n border\n top-1/2\n -translate-y-1/2\n transition-all\n duration-200\n `;\n\n // Posición: OFF = left-px (1px), ON = left-[13px]\n const positionClass = checked ? 'left-[13px]' : 'left-px';\n\n if (disabled) {\n const borderClass = checked\n ? 'border-primary-inverse-border dark:border-primary-inverse-border'\n : 'border-border-primary dark:border-dark-border-primary';\n return `${baseButtonClasses} ${positionClass} ${borderClass}`;\n }\n\n const borderClass = checked\n ? `\n border-primary-inverse-border\n peer-hover:border-[#307cc5]\n dark:border-primary-inverse-border\n dark:peer-hover:border-[#307cc5]\n `\n : `\n border-border-primary\n peer-hover:border-[#b6b6b9]\n dark:border-dark-border-primary\n dark:peer-hover:border-[#b6b6b9]\n `;\n\n return `${baseButtonClasses} ${positionClass} ${borderClass}`;\n };\n\n // ===== COMBINAR CLASES =====\n const trackClasses = [\n baseTrackClasses,\n getTrackStateClasses(),\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n const buttonClasses = getButtonClasses()\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== COMPONENTES REUTILIZABLES =====\n const LabelContent = (label || description) ? (\n <label\n htmlFor={switchId}\n className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\n }`}\n >\n {label && (\n <span className=\"font-bold text-content-primary dark:text-dark-content-primary\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"font-normal text-content-secondary dark:text-content-secondary\">\n {description}\n </span>\n )}\n </label>\n ) : null;\n\n const SwitchInput = (\n <div className=\"flex items-center justify-center shrink-0\">\n {/* Native Input (hidden but accessible) */}\n <input\n ref={ref}\n type=\"checkbox\"\n id={switchId}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n className=\"peer sr-only\"\n aria-label={ariaLabel || label}\n {...props}\n />\n\n {/* Custom Switch Visual */}\n <label\n htmlFor={switchId}\n className={trackClasses}\n aria-hidden=\"true\"\n >\n {/* Button (sliding circle) */}\n <div className={buttonClasses} />\n </label>\n </div>\n );\n\n return (\n <div className={`flex gap-2 items-center w-[344px] ${className}`}>\n {labelPosition === 'leading' ? (\n <>\n {LabelContent}\n {SwitchInput}\n </>\n ) : (\n <>\n {SwitchInput}\n {LabelContent}\n </>\n )}\n </div>\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n","import { forwardRef } from 'react';\nimport type { AvatarProps } from './Avatar.types';\n\n/**\n * Avatar - Componente de avatar del sistema de diseño Siesa\n *\n * Componente para mostrar imágenes de usuario o iniciales con soporte para:\n * - Tamaños: 4 (20px), 6 (24px), 8 (32px), 10 (40px)\n * - Tipos: circular (completamente redondo) y rounded (esquinas redondeadas)\n * - Imagen o iniciales\n * - Dark mode completo\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Tipografía adaptativa según tamaño\n * - Type safety con TypeScript estricto\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Con imagen\n * <Avatar\n * src=\"/path/to/image.jpg\"\n * alt=\"John Doe\"\n * size=\"10\"\n * type=\"circular\"\n * />\n *\n * // Con iniciales\n * <Avatar\n * initials=\"JD\"\n * size=\"10\"\n * type=\"circular\"\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n size = '10',\n type = 'circular',\n src,\n alt = '',\n initials,\n className = '',\n ...props\n },\n ref\n ) => {\n // ===== CLASES DE TAMAÑO =====\n // Tamaño del contenedor del avatar\n const containerSizeClasses = {\n '4': 'w-5 h-5',\n '6': 'w-6 h-6',\n '8': 'w-8 h-8',\n '10': 'w-10 h-10',\n };\n\n // ===== CLASES DE TEXTO =====\n // Tamaño de texto para iniciales (basado en sistema tipográfico)\n const textSizeClasses = {\n '4': 'text-xs', // 12px - Paragraph Tiny\n '6': 'text-xs', // 12px - Paragraph Tiny\n '8': 'text-sm', // 14px - Paragraph Small\n '10': 'text-base', // 16px - Paragraph Base\n };\n\n // ===== CLASES DE TIPO (Forma) =====\n const typeClasses = {\n circular: 'rounded-full',\n rounded: 'rounded-md',\n };\n\n // ===== CLASES BASE =====\n const baseClasses = `\n relative\n inline-flex\n items-center\n justify-center\n overflow-hidden\n ${containerSizeClasses[size]}\n ${typeClasses[type]}\n `;\n\n // Si hay imagen, mostrarla\n if (src) {\n return (\n <div\n ref={ref}\n className={`${baseClasses} ${className}`.trim().replace(/\\s+/g, ' ')}\n >\n <img\n src={src}\n alt={alt}\n className=\"w-full h-full object-cover\"\n {...(props as any)}\n />\n </div>\n );\n }\n\n // Si hay iniciales, mostrarlas\n if (initials) {\n return (\n <div\n ref={ref}\n className={`\n ${baseClasses}\n ${textSizeClasses[size]}\n bg-content-primary\n text-white\n font-normal\n dark:bg-dark-bg-inverse\n dark:text-dark-content-inverse\n ${className}\n `.trim().replace(/\\s+/g, ' ')}\n >\n <span className=\"leading-none\">{initials}</span>\n </div>\n );\n }\n\n // Fallback: avatar vacío\n return (\n <div\n ref={ref}\n className={`\n ${baseClasses}\n bg-background-secondary\n dark:bg-dark-bg-primary\n ${className}\n `.trim().replace(/\\s+/g, ' ')}\n />\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n","import { forwardRef } from 'react';\nimport type { DividerProps } from './Divider.types';\n\n/**\n * Divider del sistema de diseño Siesa\n *\n * Línea horizontal de 1px para separar contenido visual o semánticamente.\n * Implementa dos variantes con soporte completo de dark mode.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Componente semántico usando elemento <hr>\n *\n * @see docs/colors.md - Sistema de colores (border-primary, border-secondary)\n * @see docs/spacing.md - Sistema de espaciado (altura de 1px)\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4096-8445 - Especificaciones Figma\n *\n * @example\n * ```tsx\n * // Default divider (más visible)\n * <Divider />\n * <Divider type=\"default\" />\n *\n * // Soft divider (más sutil)\n * <Divider type=\"soft\" />\n *\n * // Con clases personalizadas\n * <Divider className=\"my-6\" />\n * ```\n */\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(\n (\n {\n type = 'default',\n className = '',\n ...props\n },\n ref\n ) => {\n // ===== CLASES DE TIPO =====\n // Orden de modificadores: {dark}:{utility}\n const typeClasses = {\n // Default: Línea más visible para separaciones claras\n // Light: border-primary (#e4e4e7)\n // Dark: dark-border-primary (#71717a)\n default: 'bg-border-primary dark:bg-dark-border-primary',\n\n // Soft: Línea más sutil para separaciones suaves\n // Light: border-secondary (#f4f4f5 - muy claro)\n // Dark: gray-700 (#374151 - gris medio-oscuro, más sutil que dark-border-primary)\n soft: 'bg-border-secondary dark:bg-gray-700',\n };\n\n // ===== CLASES BASE =====\n const baseClasses = 'w-full h-px border-0';\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [\n baseClasses,\n typeClasses[type],\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <hr\n ref={ref}\n className={finalClasses}\n {...props}\n />\n );\n }\n);\n\nDivider.displayName = 'Divider';\n","import { forwardRef } from 'react';\nimport type { DescriptionListProps } from './DescriptionList.types';\n\n/**\n * DescriptionList del sistema de diseño Siesa\n *\n * Componente para mostrar información estructurada en formato clave-valor (term/details).\n * Layout de dos columnas con separador inferior entre items.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Layout flexible y responsive\n * - Tipografía del sistema (Paragraph/Small - 14px)\n *\n * @see docs/colors.md - Sistema de colores (content-primary, content-secondary)\n * @see docs/typography.md - Sistema tipográfico (Paragraph/Small)\n * @see docs/spacing.md - Sistema de espaciado (padding, gaps)\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4103-8449 - Especificaciones Figma\n *\n * @example\n * ```tsx\n * // Item básico\n * <DescriptionList\n * term=\"Customer\"\n * details=\"Jhonatan Diaz\"\n * />\n *\n * // Lista completa\n * <div>\n * <DescriptionList term=\"Event\" details=\"Bear Hug: Live in Concert\" />\n * <DescriptionList term=\"Amount\" details=\"$120,000 COP\" />\n * <DescriptionList term=\"Fee\" details=\"$20,000 COP\" />\n * </div>\n * ```\n */\nexport const DescriptionList = forwardRef<HTMLDivElement, DescriptionListProps>(\n (\n {\n term,\n details,\n className = '',\n ...props\n },\n ref\n ) => {\n // ===== CLASES BASE =====\n const baseClasses = `\n flex\n flex-wrap\n gap-1\n items-start\n py-2.5\n border-b\n border-border-secondary\n dark:border-gray-700\n `;\n\n // ===== CLASES DE COLUMNA =====\n // Cada columna ocupa el 50% del espacio disponible (flex-1)\n // con un ancho mínimo de 180px para mantener legibilidad\n const columnClasses = 'flex-1 min-w-[180px]';\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [baseClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div ref={ref} className={finalClasses} {...props}>\n {/* Term Column (izquierda) */}\n {/* Light: content-secondary (#a1a1aa) */}\n {/* Dark: gray-400 (#9ca3af - gris medio claro para mantener contraste) */}\n <div className={columnClasses}>\n <p className=\"text-sm leading-5 text-content-secondary dark:text-gray-400 font-normal\">\n {term}\n </p>\n </div>\n\n {/* Details Column (derecha) */}\n {/* Light: content-primary (#18181b) */}\n {/* Dark: dark-content-primary (#ffffff) */}\n <div className={columnClasses}>\n <p className=\"text-sm leading-5 text-content-primary dark:text-dark-content-primary font-normal\">\n {details}\n </p>\n </div>\n </div>\n );\n }\n);\n\nDescriptionList.displayName = 'DescriptionList';\n","import { forwardRef } from 'react';\nimport type { AlertProps } from './Alert.types';\nimport { Button } from '../Button/Button';\n\n/**\n * Alert - Componente de alerta/diálogo del sistema de diseño Siesa\n *\n * Componente modal para confirmaciones con soporte para:\n * - Título y descripción\n * - Contenido personalizado (children)\n * - Botones de acción personalizados o por defecto\n * - Dark mode\n *\n * @example\n * ```tsx\n * <Alert\n * title=\"Are you sure you want to refund this payment?\"\n * description=\"The refund will be reflected in 2 to 3 business days.\"\n * onCancel={() => console.log('Cancelled')}\n * onConfirm={() => console.log('Confirmed')}\n * confirmText=\"Refund\"\n * />\n * ```\n */\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(\n (\n {\n title,\n description,\n children,\n actions,\n onCancel,\n onConfirm,\n cancelText = 'Cancelar',\n confirmText = 'Confirmar',\n className = '',\n ...props\n },\n ref\n ) => {\n // Si se proveen actions personalizadas, usarlas. Si no, usar botones por defecto\n const actionButtons = actions || (\n <>\n {onCancel && (\n <Button type=\"plain\" size=\"base\" onClick={onCancel}>\n {cancelText}\n </Button>\n )}\n {onConfirm && (\n <Button type=\"default\" size=\"base\" onClick={onConfirm}>\n {confirmText}\n </Button>\n )}\n </>\n );\n\n return (\n <div\n ref={ref}\n className={`\n w-[512px]\n bg-white\n dark:bg-dark-bg-primary\n border\n border-border-primary\n dark:border-dark-border-primary\n rounded-xl\n ${className}\n `.trim().replace(/\\s+/g, ' ')}\n {...props}\n >\n {/* Content Container */}\n <div className=\"p-6 flex flex-col gap-4\">\n {/* Text Section */}\n <div className=\"flex flex-col gap-3\">\n {/* Title */}\n <p className=\"text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary\">\n {title}\n </p>\n\n {/* Description (optional) */}\n {description && (\n <p className=\"text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary\">\n {description}\n </p>\n )}\n </div>\n\n {/* Body Content (optional) */}\n {children && (\n <div className=\"flex flex-col gap-3\">\n {children}\n </div>\n )}\n\n {/* Actions */}\n <div className=\"flex flex-wrap gap-3 items-center justify-end\">\n {actionButtons}\n </div>\n </div>\n </div>\n );\n }\n);\n\nAlert.displayName = 'Alert';\n","import { forwardRef, cloneElement } from 'react';\nimport type { BadgeProps, BadgeColor } from './Badge.types';\n\n/**\n * Badge del sistema de diseño Siesa\n *\n * Componente para mostrar etiquetas con múltiples variantes de color.\n * Los badges mantienen sus colores vibrantes en light y dark mode para\n * garantizar visibilidad y consistencia visual.\n *\n * Características implementadas:\n * - 21 variantes de color (zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, primary, secondary, tertiary)\n * - Icono opcional a la izquierda (12x12px)\n * - Contador/notification badge opcional\n * - Estados hover con transiciones suaves\n * - Los colores se mantienen vibrantes en dark mode (según diseño Figma)\n * - Tipografía: Label Tiny (12px Bold)\n *\n * Mejores prácticas implementadas:\n * - Tokens de color de Tailwind estándar para badges\n * - Font-family explícita (SiesaBT via font-sans)\n * - Transiciones suaves (duration-200)\n * - Estructura clara y mantenible\n *\n * @see docs/typography.md - Sistema tipográfico (Label Tiny)\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4130-9382\n *\n * @example\n * ```tsx\n * // Badge simple\n * <Badge color=\"blue\" label=\"Label\" />\n *\n * // Badge con icono\n * <Badge color=\"green\" label=\"Success\" leftIcon={<CheckIcon />} />\n *\n * // Badge con contador\n * <Badge color=\"red\" label=\"Errors\" count={5} />\n *\n * // Badge completo\n * <Badge color=\"primary\" label=\"Messages\" leftIcon={<MailIcon />} count={12} />\n * ```\n */\nexport const Badge = forwardRef<HTMLDivElement, BadgeProps>(\n (\n {\n color = 'zinc',\n leftIcon,\n label,\n count,\n className = '',\n ...props\n },\n ref\n ) => {\n // Map de colores - En dark mode mantienen los mismos colores vibrantes según Figma\n const colorClasses: Record<BadgeColor, { bg: string; text: string; hover: string; notificationBg: string; notificationText: string }> = {\n zinc: {\n bg: 'bg-zinc-100',\n text: 'text-zinc-600',\n hover: 'hover:bg-zinc-200',\n notificationBg: 'bg-zinc-600',\n notificationText: 'text-zinc-100',\n },\n red: {\n bg: 'bg-red-100',\n text: 'text-red-700',\n hover: 'hover:bg-red-200',\n notificationBg: 'bg-red-700',\n notificationText: 'text-red-100',\n },\n orange: {\n bg: 'bg-orange-100',\n text: 'text-orange-700',\n hover: 'hover:bg-orange-200',\n notificationBg: 'bg-orange-700',\n notificationText: 'text-orange-100',\n },\n amber: {\n bg: 'bg-amber-100',\n text: 'text-amber-700',\n hover: 'hover:bg-amber-200',\n notificationBg: 'bg-amber-700',\n notificationText: 'text-amber-100',\n },\n yellow: {\n bg: 'bg-yellow-100',\n text: 'text-yellow-700',\n hover: 'hover:bg-yellow-200',\n notificationBg: 'bg-yellow-700',\n notificationText: 'text-yellow-100',\n },\n lime: {\n bg: 'bg-lime-100',\n text: 'text-lime-700',\n hover: 'hover:bg-lime-200',\n notificationBg: 'bg-lime-700',\n notificationText: 'text-lime-100',\n },\n green: {\n bg: 'bg-green-100',\n text: 'text-green-700',\n hover: 'hover:bg-green-200',\n notificationBg: 'bg-green-700',\n notificationText: 'text-green-100',\n },\n emerald: {\n bg: 'bg-emerald-100',\n text: 'text-emerald-700',\n hover: 'hover:bg-emerald-200',\n notificationBg: 'bg-emerald-700',\n notificationText: 'text-emerald-100',\n },\n teal: {\n bg: 'bg-teal-100',\n text: 'text-teal-700',\n hover: 'hover:bg-teal-200',\n notificationBg: 'bg-teal-700',\n notificationText: 'text-teal-100',\n },\n cyan: {\n bg: 'bg-cyan-100',\n text: 'text-cyan-700',\n hover: 'hover:bg-cyan-200',\n notificationBg: 'bg-cyan-700',\n notificationText: 'text-cyan-100',\n },\n sky: {\n bg: 'bg-sky-100',\n text: 'text-sky-700',\n hover: 'hover:bg-sky-200',\n notificationBg: 'bg-sky-700',\n notificationText: 'text-sky-100',\n },\n blue: {\n bg: 'bg-blue-100',\n text: 'text-blue-700',\n hover: 'hover:bg-blue-200',\n notificationBg: 'bg-blue-700',\n notificationText: 'text-blue-100',\n },\n indigo: {\n bg: 'bg-indigo-100',\n text: 'text-indigo-700',\n hover: 'hover:bg-indigo-200',\n notificationBg: 'bg-indigo-700',\n notificationText: 'text-indigo-100',\n },\n violet: {\n bg: 'bg-violet-100',\n text: 'text-violet-700',\n hover: 'hover:bg-violet-200',\n notificationBg: 'bg-violet-700',\n notificationText: 'text-violet-100',\n },\n purple: {\n bg: 'bg-purple-100',\n text: 'text-purple-700',\n hover: 'hover:bg-purple-200',\n notificationBg: 'bg-purple-700',\n notificationText: 'text-purple-100',\n },\n fuchsia: {\n bg: 'bg-fuchsia-100',\n text: 'text-fuchsia-700',\n hover: 'hover:bg-fuchsia-200',\n notificationBg: 'bg-fuchsia-700',\n notificationText: 'text-fuchsia-100',\n },\n pink: {\n bg: 'bg-pink-100',\n text: 'text-pink-700',\n hover: 'hover:bg-pink-200',\n notificationBg: 'bg-pink-700',\n notificationText: 'text-pink-100',\n },\n rose: {\n bg: 'bg-rose-100',\n text: 'text-rose-700',\n hover: 'hover:bg-rose-200',\n notificationBg: 'bg-rose-700',\n notificationText: 'text-rose-100',\n },\n primary: {\n bg: 'bg-primary-custom-100',\n text: 'text-primary-custom-600',\n hover: 'hover:bg-primary-custom-200',\n notificationBg: 'bg-primary-custom-600',\n notificationText: 'text-primary-custom-100',\n },\n secondary: {\n bg: 'bg-zinc-100',\n text: 'text-zinc-600',\n hover: 'hover:bg-zinc-200',\n notificationBg: 'bg-zinc-600',\n notificationText: 'text-zinc-100',\n },\n tertiary: {\n bg: 'bg-zinc-100',\n text: 'text-zinc-600',\n hover: 'hover:bg-zinc-200',\n notificationBg: 'bg-zinc-600',\n notificationText: 'text-zinc-100',\n },\n };\n\n const colors = colorClasses[color];\n\n // Renderizar icono con tamaño correcto (12x12)\n const renderIcon = (icon: React.ReactElement) => {\n const existingClassName = (icon.props as any).className || '';\n return cloneElement(icon as React.ReactElement<any>, {\n className: `w-3 h-3 ${existingClassName}`.trim(),\n });\n };\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [\n 'inline-flex',\n 'items-center',\n 'gap-1',\n 'px-1.5',\n 'py-1',\n 'rounded-md',\n 'font-sans',\n colors.bg,\n colors.hover,\n 'transition-colors',\n 'duration-200',\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div\n ref={ref}\n className={finalClasses}\n {...props}\n >\n {/* Icono izquierdo */}\n {leftIcon && (\n <div className={`flex items-center justify-center ${colors.text}`}>\n {renderIcon(leftIcon)}\n </div>\n )}\n\n {/* Label del badge */}\n <span className={`font-sans text-xs leading-4 ${colors.text}`}>\n {label}\n </span>\n\n {/* Notification badge (contador) */}\n {count !== undefined && (\n <div\n className={`\n h-3\n flex\n items-center\n justify-center\n px-0.5\n rounded-xs\n min-w-[12px]\n ${colors.notificationBg}\n `.trim().replace(/\\s+/g, ' ')}\n >\n <span className={`font-sans text-xs leading-4 ${colors.notificationText}`}>\n {count}\n </span>\n </div>\n )}\n </div>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n","import { forwardRef, useState, useEffect } from 'react';\nimport type { QuantityProps } from './Quantity.types';\n\n/**\n * Quantity - Componente de cantidad del sistema de diseño Siesa\n *\n * Componente para seleccionar cantidades con soporte para:\n * - Botones de incremento/decremento\n * - Valores mínimo y máximo\n * - Label opcional con link\n * - Texto de ayuda opcional\n * - Estado de error\n * - Estado deshabilitado\n * - Dark mode completo\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Focus rings adaptativos para light y dark mode\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Quantity\n * label=\"Cantidad\"\n * value={5}\n * min={0}\n * max={10}\n * onChange={(value) => console.log(value)}\n * />\n * ```\n */\nexport const Quantity = forwardRef<HTMLDivElement, QuantityProps>(\n (\n {\n value: controlledValue,\n defaultValue = 0,\n onChange,\n min = 0,\n max,\n label,\n linkText,\n onLinkClick,\n helperText,\n error = false,\n disabled = false,\n className = '',\n ...props\n },\n ref\n ) => {\n // Estado interno para valor no controlado\n const [internalValue, setInternalValue] = useState(defaultValue);\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n\n // Sincronizar valor interno con defaultValue cuando cambia\n useEffect(() => {\n if (!isControlled) {\n setInternalValue(defaultValue);\n }\n }, [defaultValue, isControlled]);\n\n // Handler para cambio de valor\n const handleValueChange = (newValue: number) => {\n // Aplicar restricciones de min/max\n let clampedValue = newValue;\n if (min !== undefined && clampedValue < min) {\n clampedValue = min;\n }\n if (max !== undefined && clampedValue > max) {\n clampedValue = max;\n }\n\n // Actualizar estado interno si no está controlado\n if (!isControlled) {\n setInternalValue(clampedValue);\n }\n\n // Llamar onChange si existe\n onChange?.(clampedValue);\n };\n\n // Handlers para botones\n const handleDecrement = () => {\n if (disabled) return;\n handleValueChange(currentValue - 1);\n };\n\n const handleIncrement = () => {\n if (disabled) return;\n handleValueChange(currentValue + 1);\n };\n\n // Verificar si los botones deben estar deshabilitados\n const isDecrementDisabled = disabled || (min !== undefined && currentValue <= min);\n const isIncrementDisabled = disabled || (max !== undefined && currentValue >= max);\n\n // Iconos SVG inline\n const MinusIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 8H13\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n\n const PlusIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8 3V13M3 8H13\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n\n // Clases para el estado (usando especificaciones exactas de Figma)\n const borderClass = error\n ? 'border-error-border dark:border-error-border'\n : 'border-border-primary dark:border-dark-border-primary';\n\n const hoverClass = !disabled && !error\n ? 'hover:border-[#f9f9f9] dark:hover:border-[#f9f9f9]'\n : '';\n\n const focusClass = !disabled && !error\n ? 'focus-within:border-2 focus-within:border-[#329cff] dark:focus-within:border-[#329cff]'\n : '';\n\n return (\n <div\n ref={ref}\n className={`flex flex-col gap-2 ${className}`.trim()}\n {...props}\n >\n {/* Label con link opcional */}\n {label && (\n <div className=\"flex items-center justify-between\">\n <label className=\"text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary\">\n {label}\n </label>\n {linkText && (\n <button\n type=\"button\"\n onClick={onLinkClick}\n disabled={disabled}\n className={`\n text-xs leading-4\n text-primary-custom-600\n hover:underline\n dark:text-primary-custom-600\n ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}\n transition-colors\n duration-200\n `.trim().replace(/\\s+/g, ' ')}\n >\n {linkText}\n </button>\n )}\n </div>\n )}\n\n {/* Input con botones */}\n <div\n className={`\n flex\n items-center\n gap-2\n px-3\n py-1.5\n bg-white\n dark:bg-dark-bg-primary\n border\n ${borderClass}\n ${hoverClass}\n ${focusClass}\n rounded-lg\n transition-colors\n duration-200\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n `.trim().replace(/\\s+/g, ' ')}\n >\n {/* Botón decrementar */}\n <button\n type=\"button\"\n onClick={handleDecrement}\n disabled={isDecrementDisabled}\n className={`\n flex\n items-center\n justify-center\n w-4\n h-4\n ${isDecrementDisabled\n ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'\n : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'\n }\n transition-colors\n duration-200\n `.trim().replace(/\\s+/g, ' ')}\n aria-label=\"Decrementar\"\n >\n <MinusIcon />\n </button>\n\n {/* Valor actual */}\n <div className=\"flex-1 text-center\">\n <span\n className={`\n text-base leading-6\n ${currentValue === 0\n ? 'text-content-tertiary dark:text-content-tertiary'\n : 'text-content-primary dark:text-dark-content-primary'\n }\n `.trim().replace(/\\s+/g, ' ')}\n >\n {currentValue}\n </span>\n </div>\n\n {/* Botón incrementar */}\n <button\n type=\"button\"\n onClick={handleIncrement}\n disabled={isIncrementDisabled}\n className={`\n flex\n items-center\n justify-center\n w-4\n h-4\n ${isIncrementDisabled\n ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'\n : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'\n }\n transition-colors\n duration-200\n `.trim().replace(/\\s+/g, ' ')}\n aria-label=\"Incrementar\"\n >\n <PlusIcon />\n </button>\n </div>\n\n {/* Helper text */}\n {helperText && (\n <p\n className={`\n text-sm leading-5\n ${error\n ? 'text-error-content dark:text-error-content'\n : 'text-content-tertiary dark:text-content-tertiary'\n }\n `.trim().replace(/\\s+/g, ' ')}\n >\n {helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nQuantity.displayName = 'Quantity';\n","/**\n * Iconos para el componente Dropdown\n * Usando heroicons-micro según especificaciones de Figma\n */\n\nexport const ChevronDownIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const CogIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.461 3.39a.5.5 0 0 1 .639-.206l1.703.768c.433-.36.928-.649 1.466-.847l.186-1.858ZM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const UserIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <path d=\"M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z\" />\n </svg>\n);\n\nexport const BellIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const CreditCardIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n className=\"w-4 h-4\"\n >\n <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\" />\n <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\" />\n </svg>\n);\n","import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport type {\n DropdownProps,\n DropdownItemProps,\n DropdownHeadingProps,\n DropdownDividerProps,\n} from './Dropdown.types';\nimport { ChevronDownIcon } from './icons';\n\ntype MenuPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n\n/**\n * Componente Dropdown del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels y keyboard navigation\n * - Cierre automático al hacer click fuera\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/shadows.md - Sistema de sombras\n *\n * @example\n * ```tsx\n * <Dropdown\n * placeholder=\"Options\"\n * items={[\n * { children: 'Account', icon: <UserIcon /> },\n * { children: 'Settings', icon: <CogIcon /> },\n * { isDivider: true },\n * { children: 'Logout' },\n * ]}\n * />\n * ```\n */\nexport const Dropdown: React.FC<DropdownProps> = ({\n variant = 'default',\n children,\n items,\n open: controlledOpen,\n onOpenChange,\n disabled = false,\n className = '',\n menuClassName = '',\n ariaLabel,\n placeholder = 'Options',\n}) => {\n const [internalOpen, setInternalOpen] = useState(false);\n const [menuPosition, setMenuPosition] = useState<MenuPosition>('bottom-left');\n const dropdownRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Determinar si es controlado o no controlado\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : internalOpen;\n\n // Calcular la posición óptima del menú basándose en el espacio disponible\n const calculateMenuPosition = useCallback(() => {\n if (!dropdownRef.current) return;\n\n const triggerRect = dropdownRef.current.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n // Estimación del tamaño del menú (min-width: 182px, altura aproximada)\n const menuWidth = 200;\n const menuHeight = 250;\n\n // Verificar espacio disponible\n const spaceBelow = viewportHeight - triggerRect.bottom;\n const spaceAbove = triggerRect.top;\n const spaceRight = viewportWidth - triggerRect.left;\n const spaceLeft = triggerRect.right;\n\n // Determinar posición vertical\n const openAbove = spaceBelow < menuHeight && spaceAbove > spaceBelow;\n\n // Determinar posición horizontal\n const openLeft = spaceRight < menuWidth && spaceLeft > spaceRight;\n\n if (openAbove && openLeft) {\n setMenuPosition('top-right');\n } else if (openAbove) {\n setMenuPosition('top-left');\n } else if (openLeft) {\n setMenuPosition('bottom-right');\n } else {\n setMenuPosition('bottom-left');\n }\n }, []);\n\n // Función para cambiar el estado\n const handleToggle = () => {\n if (disabled) return;\n\n const newOpen = !isOpen;\n\n // Calcular posición antes de abrir\n if (newOpen) {\n calculateMenuPosition();\n }\n\n if (!isControlled) {\n setInternalOpen(newOpen);\n }\n\n onOpenChange?.(newOpen);\n };\n\n // Cerrar al hacer click fuera\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n if (!isControlled) {\n setInternalOpen(false);\n }\n onOpenChange?.(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }\n }, [isOpen, isControlled, onOpenChange]);\n\n // Cerrar al presionar Escape\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isOpen) {\n if (!isControlled) {\n setInternalOpen(false);\n }\n onOpenChange?.(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('keydown', handleEscape);\n return () => {\n document.removeEventListener('keydown', handleEscape);\n };\n }\n }, [isOpen, isControlled, onOpenChange]);\n\n // Handler para item click\n const handleItemClick = (item: DropdownItemProps) => {\n if (item.disabled || item.isDivider || item.isHeading) return;\n\n // Ejecutar el onClick del item\n if (item.onClick) {\n item.onClick({} as React.MouseEvent<HTMLButtonElement>);\n }\n\n // Cerrar el dropdown\n if (!isControlled) {\n setInternalOpen(false);\n }\n onOpenChange?.(false);\n };\n\n // ===== CLASES DEL TRIGGER BUTTON =====\n const triggerClasses = [\n // Base\n 'inline-flex',\n 'items-center',\n 'justify-center',\n 'rounded-lg',\n 'font-bold',\n 'text-sm',\n 'whitespace-nowrap',\n 'transition-all',\n 'duration-150',\n\n // Variant-specific sizing\n variant === 'icon-only' ? 'w-9 h-9' : 'gap-3 px-3 py-2',\n\n // Colores y estados (Light Mode)\n 'bg-bg-primary',\n 'text-content-secondary',\n 'border',\n 'border-border-primary',\n 'hover:bg-background-secondary',\n 'active:scale-95',\n\n // Dark Mode\n 'dark:bg-dark-bg-primary',\n 'dark:text-dark-content-primary',\n 'dark:border-dark-border-primary',\n 'dark:hover:bg-dark-bg-secondary',\n\n // Focus ring\n 'focus:outline-hidden',\n 'focus:ring-2',\n 'focus:ring-primary-custom-400',\n 'focus:ring-offset-2',\n 'dark:focus:ring-dark-border-custom',\n 'dark:focus:ring-offset-dark-bg-primary',\n\n // Disabled\n disabled && 'opacity-50',\n disabled && 'cursor-not-allowed',\n disabled && 'pointer-events-none',\n\n // Custom classes\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // Clases de posición basadas en el cálculo\n const positionClasses: Record<MenuPosition, string> = {\n 'bottom-left': 'top-full left-0 mt-2',\n 'bottom-right': 'top-full right-0 mt-2',\n 'top-left': 'bottom-full left-0 mb-2',\n 'top-right': 'bottom-full right-0 mb-2',\n };\n\n // ===== CLASES DEL MENU =====\n const menuClasses = [\n // Base\n 'absolute',\n positionClasses[menuPosition],\n 'min-w-[182px]',\n 'rounded-xl',\n 'p-1',\n 'border',\n 'z-50',\n\n // Colores (Light Mode)\n 'bg-background-secondary',\n 'border-border-primary',\n\n // Dark Mode\n 'dark:bg-dark-bg-primary',\n 'dark:border-dark-border-primary',\n\n // Shadow\n 'shadow-menu',\n\n // Custom classes\n menuClassName,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div ref={dropdownRef} className=\"relative inline-block\">\n {/* Trigger Button */}\n <button\n type=\"button\"\n className={triggerClasses}\n onClick={handleToggle}\n disabled={disabled}\n aria-label={ariaLabel || (variant === 'icon-only' ? 'Abrir menú' : undefined)}\n aria-haspopup=\"true\"\n aria-expanded={isOpen}\n >\n {variant === 'default' && <span>{children || placeholder}</span>}\n <ChevronDownIcon />\n </button>\n\n {/* Dropdown Menu */}\n {isOpen && (\n <div ref={menuRef} className={menuClasses}>\n {items.map((item, index) => {\n if (item.isDivider) {\n return <DropdownDivider key={index} className={item.className} />;\n }\n\n if (item.isHeading) {\n return (\n <DropdownHeading key={index} className={item.className}>\n {item.children}\n </DropdownHeading>\n );\n }\n\n return (\n <DropdownItem\n key={index}\n {...item}\n onClick={() => handleItemClick(item)}\n />\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\n/**\n * Componente DropdownItem\n * Item individual dentro del menú dropdown\n *\n * @example\n * ```tsx\n * <DropdownItem icon={<UserIcon />} shortcut=\"⌘ P\">\n * Profile\n * </DropdownItem>\n * ```\n */\nexport const DropdownItem: React.FC<DropdownItemProps> = ({\n children,\n icon,\n description,\n shortcut,\n disabled = false,\n selected = false,\n onClick,\n className = '',\n}) => {\n // ===== CLASES DEL ITEM =====\n const itemClasses = [\n // Base\n 'flex',\n 'items-center',\n 'gap-3',\n 'px-4',\n 'py-2',\n 'rounded-lg',\n 'text-sm',\n 'w-full',\n 'text-left',\n 'transition-colors',\n 'duration-150',\n\n // Colores y estados (Light Mode)\n 'text-content-primary',\n !disabled && 'hover:bg-bg-primary',\n selected && 'bg-bg-primary',\n\n // Dark Mode\n 'dark:text-dark-content-primary',\n !disabled && 'dark:hover:bg-dark-bg-secondary',\n selected && 'dark:bg-dark-bg-secondary',\n\n // Disabled\n disabled && 'opacity-50',\n disabled && 'cursor-not-allowed',\n !disabled && 'cursor-pointer',\n\n // Custom classes\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type=\"button\"\n className={itemClasses}\n onClick={onClick}\n disabled={disabled}\n >\n {/* Icon */}\n {icon && (\n <span className=\"inline-flex items-center justify-center w-4 h-4 text-content-secondary dark:text-dark-content-secondary\">\n {icon}\n </span>\n )}\n\n {/* Content */}\n <div className=\"flex-1 min-w-0\">\n {/* Label */}\n <div className=\"text-content-primary dark:text-dark-content-primary\">\n {children}\n </div>\n\n {/* Description */}\n {description && (\n <div className=\"text-xs text-content-secondary dark:text-dark-content-secondary mt-0.5\">\n {description}\n </div>\n )}\n </div>\n\n {/* Shortcut */}\n {shortcut && (\n <span className=\"text-xs text-content-secondary dark:text-dark-content-secondary ml-auto whitespace-nowrap\">\n {shortcut}\n </span>\n )}\n </button>\n );\n};\n\n/**\n * Componente DropdownHeading\n * Encabezado de sección dentro del menú dropdown\n *\n * @example\n * ```tsx\n * <DropdownHeading>My events</DropdownHeading>\n * ```\n */\nexport const DropdownHeading: React.FC<DropdownHeadingProps> = ({\n children,\n className = '',\n}) => {\n // ===== CLASES DEL HEADING =====\n const headingClasses = [\n // Base\n 'px-4',\n 'py-1',\n 'text-xs',\n 'font-normal',\n\n // Colores\n 'text-content-tertiary',\n\n // Dark Mode\n 'dark:text-dark-content-tertiary',\n\n // Custom classes\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return <div className={headingClasses}>{children}</div>;\n};\n\n/**\n * Componente DropdownDivider\n * Separador visual entre items del menú dropdown\n *\n * @example\n * ```tsx\n * <DropdownDivider />\n * ```\n */\nexport const DropdownDivider: React.FC<DropdownDividerProps> = ({\n className = '',\n}) => {\n // ===== CLASES DEL DIVIDER =====\n const dividerClasses = [\n // Base\n 'px-4',\n 'py-1',\n\n // Custom classes\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div className={dividerClasses}>\n <div className=\"h-px bg-border-primary dark:bg-dark-border-primary\" />\n </div>\n );\n};\n","import React from 'react';\nimport type { NotificationProps } from './Notification.types';\n\n/**\n * Componente Notification del sistema de diseño Siesa\n *\n * Badge de notificación para indicar alertas, mensajes o notificaciones pendientes.\n * Puede mostrar un punto simple o un contador numérico con límite automático a 99+.\n *\n * **Especificaciones de Figma:**\n * - Badge con número: 27px × 13px (aprox), Label/XXSmall (10px Bold, line-height 12px)\n * - Badge simple (dot): 13px × 13px\n * - Color: `content-extensions-red` (#b91c1c) por defecto\n * - Border radius: Pill (rounded-full)\n * - Padding: 4px horizontal\n *\n * **Variantes:**\n * - Sin count: Muestra punto circular (dot)\n * - Con count: Muestra badge con número (máximo 99+)\n *\n * **Uso típico:**\n * - Como overlay en iconos o botones\n * - En elementos de menú o navegación\n * - Standalone para indicar estado\n *\n * @see docs/colors.md - Sistema de colores (token content-extensions-red)\n * @see docs/typography.md - Sistema tipográfico (Label/XXSmall)\n * @see src/components/Button/Button.tsx - Referencia de badges en botones\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4310-22651\n *\n * @example\n * ```tsx\n * // Badge simple (punto)\n * <Notification />\n *\n * // Badge con número\n * <Notification count={5} />\n *\n * // Badge con muchos (muestra 99+)\n * <Notification count={150} />\n *\n * // Con color personalizado\n * <Notification count={3} color=\"green\" />\n *\n * // Como overlay en botón\n * <button className=\"relative\">\n * <BellIcon />\n * <Notification count={5} className=\"absolute -top-1 -right-1\" />\n * </button>\n * ```\n */\nexport const Notification: React.FC<NotificationProps> = ({\n count,\n color = 'red',\n className = '',\n ariaLabel,\n}) => {\n // ===== MAPA DE COLORES =====\n // Sistema de colores consistente con Button y Badge\n const colorClasses: Record<string, { bg: string; text: string }> = {\n zinc: { bg: 'bg-zinc-600', text: 'text-white' },\n red: { bg: 'bg-content-extensions-red', text: 'text-white' },\n orange: { bg: 'bg-orange-700', text: 'text-white' },\n amber: { bg: 'bg-amber-700', text: 'text-white' },\n yellow: { bg: 'bg-yellow-700', text: 'text-white' },\n lime: { bg: 'bg-lime-700', text: 'text-white' },\n green: { bg: 'bg-green-700', text: 'text-white' },\n emerald: { bg: 'bg-emerald-700', text: 'text-white' },\n teal: { bg: 'bg-teal-700', text: 'text-white' },\n cyan: { bg: 'bg-cyan-700', text: 'text-white' },\n sky: { bg: 'bg-sky-700', text: 'text-white' },\n blue: { bg: 'bg-blue-700', text: 'text-white' },\n indigo: { bg: 'bg-indigo-700', text: 'text-white' },\n violet: { bg: 'bg-violet-700', text: 'text-white' },\n purple: { bg: 'bg-purple-700', text: 'text-white' },\n fuchsia: { bg: 'bg-fuchsia-700', text: 'text-white' },\n pink: { bg: 'bg-pink-700', text: 'text-white' },\n rose: { bg: 'bg-rose-700', text: 'text-white' },\n primary: { bg: 'bg-primary-custom-600', text: 'text-white' },\n secondary: { bg: 'bg-zinc-600', text: 'text-white' },\n tertiary: { bg: 'bg-zinc-600', text: 'text-white' },\n };\n\n const colors = colorClasses[color] || colorClasses.red;\n\n // ===== ARIA LABEL DINÁMICO =====\n const dynamicAriaLabel = ariaLabel ||\n (count !== undefined && count > 0\n ? `${count} notificaci${count === 1 ? 'ón' : 'ones'}`\n : 'Notificación pendiente');\n\n // ===== BADGE CON NÚMERO =====\n if (count !== undefined && count > 0) {\n const displayCount = count > 99 ? '99+' : count.toString();\n\n return (\n <span\n className={`\n inline-flex\n items-center\n justify-center\n min-w-[16px]\n h-4\n px-1\n rounded-full\n text-[10px]\n font-bold\n leading-none\n ${colors.bg}\n ${colors.text}\n pointer-events-none\n dark:${colors.bg}\n dark:${colors.text}\n ${className}\n `\n .trim()\n .replace(/\\s+/g, ' ')}\n role=\"status\"\n aria-label={dynamicAriaLabel}\n >\n {displayCount}\n </span>\n );\n }\n\n // ===== BADGE SIMPLE (DOT) =====\n return (\n <span\n className={`\n inline-block\n w-2\n h-2\n rounded-full\n ${colors.bg}\n pointer-events-none\n dark:${colors.bg}\n ${className}\n `\n .trim()\n .replace(/\\s+/g, ' ')}\n role=\"status\"\n aria-label={dynamicAriaLabel}\n />\n );\n};\n","import React from 'react';\n\n/**\n * Icono de flecha izquierda (ChevronLeft)\n * Usado en el botón \"Back\"\n * Heroicons Micro (16x16px)\n */\nexport const ArrowLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => {\n return (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n\n/**\n * Icono de flecha derecha (ChevronRight)\n * Usado en el botón \"Next\"\n * Heroicons Micro (16x16px)\n */\nexport const ArrowRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => {\n return (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n","import React, { useMemo } from 'react';\nimport type { PaginationProps, PageButtonProps } from './Pagination.types';\nimport { ArrowLeftIcon, ArrowRightIcon } from './icons';\n\n/**\n * Componente Pagination del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n * - Algoritmo de paginación inteligente\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label Small)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Pagination\n * currentPage={1}\n * totalPages={66}\n * onPageChange={(page) => console.log(page)}\n * />\n * ```\n */\nexport const Pagination: React.FC<PaginationProps> = ({\n currentPage = 1,\n totalPages,\n onPageChange,\n backText = 'Atrás',\n nextText = 'Siguiente',\n siblingCount = 1,\n showBackButton = true,\n showNextButton = true,\n className = '',\n ariaLabel = 'Paginación',\n}) => {\n /**\n * Genera el array de páginas a mostrar\n * Algoritmo: [1] ... [currentPage-1] [currentPage] [currentPage+1] ... [totalPages]\n */\n const paginationRange = useMemo(() => {\n const totalNumbers = siblingCount * 2 + 3; // Página actual + siblings + primera + última\n const totalBlocks = totalNumbers + 2; // + 2 separadores \"...\"\n\n // Si el total de páginas es menor que el total de bloques, mostrar todas\n if (totalPages <= totalBlocks) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\n\n const shouldShowLeftDots = leftSiblingIndex > 2;\n const shouldShowRightDots = rightSiblingIndex < totalPages - 1;\n\n const firstPageIndex = 1;\n const lastPageIndex = totalPages;\n\n // No mostrar dots a la izquierda\n if (!shouldShowLeftDots && shouldShowRightDots) {\n const leftItemCount = 3 + 2 * siblingCount;\n const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);\n return [...leftRange, '...', totalPages];\n }\n\n // No mostrar dots a la derecha\n if (shouldShowLeftDots && !shouldShowRightDots) {\n const rightItemCount = 3 + 2 * siblingCount;\n const rightRange = Array.from(\n { length: rightItemCount },\n (_, i) => totalPages - rightItemCount + i + 1\n );\n return [firstPageIndex, '...', ...rightRange];\n }\n\n // Mostrar ambos dots\n if (shouldShowLeftDots && shouldShowRightDots) {\n const middleRange = Array.from(\n { length: rightSiblingIndex - leftSiblingIndex + 1 },\n (_, i) => leftSiblingIndex + i\n );\n return [firstPageIndex, '...', ...middleRange, '...', lastPageIndex];\n }\n\n return [];\n }, [currentPage, totalPages, siblingCount]);\n\n /**\n * Handler para cambio de página\n */\n const handlePageChange = (page: number) => {\n if (page >= 1 && page <= totalPages && page !== currentPage) {\n onPageChange?.(page);\n }\n };\n\n /**\n * Componente interno: Botón de página\n */\n const PageButton: React.FC<PageButtonProps> = ({\n page,\n isActive = false,\n disabled = false,\n onClick,\n ariaLabel: buttonAriaLabel,\n }) => {\n const isDots = page === '...';\n\n // ===== CLASES BASE =====\n const baseClasses = `\n inline-flex\n items-center\n justify-center\n gap-3\n px-3\n py-2\n rounded-md\n font-bold\n text-sm\n whitespace-nowrap\n transition-all\n duration-150\n `;\n\n // ===== CLASES DE ESTADO =====\n const stateClasses = isDots\n ? `\n text-primary-custom-600\n dark:text-primary-custom-600\n cursor-default\n pointer-events-none\n `\n : isActive\n ? `\n bg-primary-custom-100\n text-primary-custom-600\n dark:bg-primary-custom-100\n dark:text-primary-custom-600\n `\n : `\n text-primary-custom-600\n hover:bg-primary-custom-100\n active:scale-95\n dark:text-primary-custom-600\n dark:hover:bg-primary-custom-100\n dark:active:scale-95\n `;\n\n // ===== CLASES DE DISABLED =====\n const disabledClasses = disabled\n ? `\n opacity-50\n cursor-not-allowed\n pointer-events-none\n `\n : '';\n\n // ===== COMBINAR CLASES =====\n const buttonClasses = [baseClasses, stateClasses, disabledClasses]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type=\"button\"\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled || isDots}\n aria-label={buttonAriaLabel}\n aria-current={isActive ? 'page' : undefined}\n >\n {page}\n </button>\n );\n };\n\n // ===== CLASES DEL CONTAINER =====\n const containerClasses = `\n inline-flex\n items-center\n justify-between\n gap-0\n ${className}\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <nav className={containerClasses} aria-label={ariaLabel} role=\"navigation\">\n {/* ===== BOTÓN BACK ===== */}\n {showBackButton && (\n <button\n type=\"button\"\n className={`\n inline-flex\n items-center\n justify-center\n gap-3\n px-3\n py-2\n rounded-md\n font-bold\n text-sm\n text-primary-custom-600\n hover:bg-primary-custom-100\n active:scale-95\n dark:text-primary-custom-600\n dark:hover:bg-primary-custom-100\n dark:active:scale-95\n transition-all\n duration-150\n ${currentPage === 1 ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n onClick={() => handlePageChange(currentPage - 1)}\n disabled={currentPage === 1}\n aria-label={`${backText} page`}\n >\n <ArrowLeftIcon className=\"w-4 h-4\" />\n {backText}\n </button>\n )}\n\n {/* ===== NÚMEROS DE PÁGINA ===== */}\n <div className=\"inline-flex items-center\">\n {paginationRange.map((page, index) => (\n <PageButton\n key={`${page}-${index}`}\n page={page}\n isActive={page === currentPage}\n onClick={() => typeof page === 'number' && handlePageChange(page)}\n ariaLabel={\n typeof page === 'number' ? `Go to page ${page}` : `Page ${page}`\n }\n />\n ))}\n </div>\n\n {/* ===== BOTÓN NEXT ===== */}\n {showNextButton && (\n <button\n type=\"button\"\n className={`\n inline-flex\n items-center\n justify-center\n gap-3\n px-3\n py-2\n rounded-md\n font-bold\n text-sm\n text-primary-custom-600\n hover:bg-primary-custom-100\n active:scale-95\n dark:text-primary-custom-600\n dark:hover:bg-primary-custom-100\n dark:active:scale-95\n transition-all\n duration-150\n ${\n currentPage === totalPages\n ? 'opacity-50 cursor-not-allowed pointer-events-none'\n : ''\n }\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n onClick={() => handlePageChange(currentPage + 1)}\n disabled={currentPage === totalPages}\n aria-label={`${nextText} page`}\n >\n {nextText}\n <ArrowRightIcon className=\"w-4 h-4\" />\n </button>\n )}\n </nav>\n );\n};\n","import React from 'react';\n\n/**\n * Icono ChevronUpDown para el trigger del Select\n * Heroicons Micro (16x16px)\n */\nexport const ChevronUpDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => {\n return (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z\"\n clipRule=\"evenodd\"\n />\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n\n/**\n * Icono Check para los items seleccionados del menu\n * Heroicons Micro (16x16px)\n */\nexport const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => {\n return (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n","import React, { useState, useRef, useEffect } from 'react';\nimport type { SelectProps, SelectOption } from './Select.types';\nimport { ChevronUpDownIcon, CheckIcon } from './icons';\n\n/**\n * Select - Componente de selección (dropdown) del sistema de diseño Siesa\n *\n * Componente Select personalizado con menú desplegable para seleccionar opciones\n * de una lista. Incluye navegación por teclado, click outside y dark mode completo.\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels y keyboard navigation\n * - Click outside para cerrar el menú\n * - Soporte de teclado (Enter, Escape, Arrow Up/Down)\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Select\n * options={[\n * { value: '1', label: 'Option 1' },\n * { value: '2', label: 'Option 2' },\n * ]}\n * value={selectedValue}\n * onChange={setSelectedValue}\n * placeholder=\"Select an option\"\n * label=\"Choose one\"\n * />\n * ```\n */\nexport const Select: React.FC<SelectProps> = ({\n options = [],\n value,\n defaultValue,\n placeholder = 'Seleccionar...',\n disabled = false,\n error = false,\n label,\n description,\n showLabel = true,\n showDescription = true,\n menuHeader,\n onChange,\n className = '',\n triggerClassName = '',\n menuClassName = '',\n ariaLabel,\n id,\n name,\n required = false,\n menuPosition = 'bottom',\n fullWidth = false,\n}) => {\n // ===== ESTADO Y REFS =====\n const [isOpen, setIsOpen] = useState(false);\n const [selectedValue, setSelectedValue] = useState<string | number | undefined>(\n value !== undefined ? value : defaultValue\n );\n const [focusedIndex, setFocusedIndex] = useState(-1);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // ===== SINCRONIZAR VALOR CONTROLADO =====\n useEffect(() => {\n if (value !== undefined) {\n setSelectedValue(value);\n }\n }, [value]);\n\n // ===== CERRAR AL HACER CLICK FUERA =====\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }\n }, [isOpen]);\n\n // ===== KEYBOARD NAVIGATION =====\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (!isOpen) return;\n\n switch (event.key) {\n case 'Escape':\n setIsOpen(false);\n triggerRef.current?.focus();\n break;\n case 'ArrowDown':\n event.preventDefault();\n setFocusedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));\n break;\n case 'ArrowUp':\n event.preventDefault();\n setFocusedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));\n break;\n case 'Enter':\n event.preventDefault();\n if (focusedIndex >= 0 && focusedIndex < options.length) {\n handleSelect(options[focusedIndex]);\n }\n break;\n }\n };\n\n if (isOpen) {\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }\n }, [isOpen, focusedIndex, options]);\n\n // ===== HELPERS =====\n const selectedOption = options.find((opt) => opt.value === selectedValue);\n\n const toggleMenu = () => {\n if (!disabled) {\n setIsOpen(!isOpen);\n setFocusedIndex(-1);\n }\n };\n\n const handleSelect = (option: SelectOption) => {\n if (option.disabled) return;\n\n setSelectedValue(option.value);\n setIsOpen(false);\n onChange?.(option.value);\n\n setTimeout(() => {\n triggerRef.current?.focus();\n }, 0);\n };\n\n // ===== CLASES BASE DEL TRIGGER =====\n // Usando el sistema tipográfico Paragraph Regular (14px = text-sm)\n // Border radius rounded-lg (8px) consistente con especificaciones\n // Gap de 12px (gap-3) entre texto e icono según Figma\n const baseTriggerClasses = `\n inline-flex\n items-center\n justify-between\n gap-3\n w-full\n px-3\n py-2\n text-sm\n font-normal\n leading-5\n rounded-lg\n border\n transition-all\n duration-150\n `;\n\n // ===== CLASES DE WIDTH =====\n const widthClasses = fullWidth ? 'w-full' : 'min-w-[200px]';\n\n // ===== CLASES PARA ESTADOS DEL TRIGGER =====\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n const triggerStateClasses = error\n ? `\n border-error-border\n bg-error-bg\n text-content-primary\n dark:border-error-border\n dark:bg-error-bg\n dark:text-dark-content-primary\n `\n : `\n bg-bg-primary\n border-border-primary\n text-content-primary\n dark:bg-dark-bg-primary\n dark:border-dark-border-primary\n dark:text-dark-content-primary\n `;\n\n // ===== CLASES PARA HOVER DEL TRIGGER =====\n // Hover overlay rgba(0,0,0,0.024) según Figma\n const triggerHoverClasses =\n !disabled && !error\n ? `\n hover:bg-[rgba(255,255,255,1)]\n hover:bg-[linear-gradient(90deg,rgba(0,0,0,0.024)_0%,rgba(0,0,0,0.024)_100%)]\n dark:hover:bg-[rgba(17,45,87,1)]\n dark:hover:bg-[linear-gradient(90deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.1)_100%)]\n `\n : '';\n\n // ===== CLASES PARA FOCUS DEL TRIGGER =====\n // Focus rings adaptativos siguiendo el patrón de otros componentes\n const triggerFocusClasses = !disabled\n ? `\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n `\n : '';\n\n // ===== CLASES PARA DISABLED DEL TRIGGER =====\n const triggerDisabledClasses = disabled\n ? `\n opacity-50\n cursor-not-allowed\n `\n : '';\n\n // ===== COMBINAR CLASES DEL TRIGGER =====\n const finalTriggerClasses = [\n baseTriggerClasses,\n widthClasses,\n triggerStateClasses,\n triggerHoverClasses,\n triggerFocusClasses,\n triggerDisabledClasses,\n triggerClassName,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES BASE DEL MENU =====\n // Según Figma: altura fija 160px (h-40), sin borde visible (border-0),\n // spacing de 4px desde trigger (mt-1), sin shadow prominente\n const baseMenuClasses = `\n absolute\n z-50\n w-full\n min-w-[200px]\n max-h-40\n overflow-y-auto\n p-1\n rounded-md\n border-0\n transition-all\n duration-150\n `;\n\n // ===== CLASES DE POSICIÓN DEL MENU =====\n // Figma muestra 4px de separación, usando mt-1 en lugar de mt-2\n const menuPositionClasses = menuPosition === 'top' ? 'bottom-full mb-1' : 'top-full mt-1';\n\n // ===== CLASES DE COLOR DEL MENU =====\n // Background secundario según Figma, sin borde prominente\n const menuColorClasses = `\n bg-background-secondary\n dark:bg-dark-bg-primary\n `;\n\n // ===== CLASES DE VISIBILIDAD DEL MENU =====\n const menuVisibilityClasses = isOpen ? 'opacity-100 visible' : 'opacity-0 invisible';\n\n // ===== COMBINAR CLASES DEL MENU =====\n const finalMenuClasses = [\n baseMenuClasses,\n menuPositionClasses,\n menuColorClasses,\n menuVisibilityClasses,\n menuClassName,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES BASE DEL MENU ITEM =====\n // CRÍTICO: Figma especifica text-[10px] leading-[12px] (Label XXSmall)\n // NO usar text-xs que es 12px - debe ser exactamente 10px según diseño\n const baseMenuItemClasses = `\n flex\n items-center\n cursor-pointer\n rounded-md\n transition-all\n duration-150\n pl-2\n pr-2.5\n py-0.5\n gap-0.5\n text-[10px]\n leading-[12px]\n font-bold\n `;\n\n // ===== FUNCIÓN PARA OBTENER CLASES DE MENU ITEM =====\n const getMenuItemClasses = (option: SelectOption, index: number) => {\n const isSelected = option.value === selectedValue;\n const isFocused = index === focusedIndex;\n\n // Estados de color\n const colorClasses =\n isSelected && !isFocused\n ? 'text-content-primary dark:text-dark-content-primary'\n : isFocused || (isSelected && isFocused)\n ? 'bg-primary-custom-600 text-primary-inverse-content dark:bg-primary-custom-600 dark:text-primary-inverse-content'\n : 'text-content-primary dark:text-dark-content-primary';\n\n // Hover\n const hoverClasses = !option.disabled\n ? 'hover:bg-primary-custom-600 hover:text-primary-inverse-content dark:hover:bg-primary-custom-600 dark:hover:text-primary-inverse-content'\n : '';\n\n // Disabled\n const disabledClasses = option.disabled ? 'opacity-50 cursor-not-allowed' : '';\n\n return [baseMenuItemClasses, colorClasses, hoverClasses, disabledClasses]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n };\n\n // ===== CLASES DEL ICONO DEL TRIGGER =====\n const iconClasses = [\n 'shrink-0',\n 'transition-transform',\n 'duration-150',\n isOpen && 'rotate-180',\n disabled ? 'text-content-tertiary dark:text-content-tertiary' : 'text-content-secondary dark:text-content-secondary',\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL CHECK ICON =====\n const checkIconClasses = 'shrink-0 w-4 h-4';\n\n // ===== RENDERIZAR COMPONENTE =====\n return (\n <div className={`relative ${fullWidth ? 'w-full' : ''} ${className}`} ref={containerRef}>\n {/* Label and Description - Según Figma, van ANTES del trigger con gap-1 (4px) */}\n {(showLabel && label) || (showDescription && description) ? (\n <div className=\"flex flex-col gap-1 mb-1 w-full\">\n {/* Label - Label Small (14px bold) */}\n {showLabel && label && (\n <label\n htmlFor={id}\n className=\"text-sm font-bold leading-5 text-content-primary dark:text-dark-content-primary\"\n >\n {label}\n {required && <span className=\"ml-1 text-error-content\">*</span>}\n </label>\n )}\n\n {/* Description - Paragraph Small (14px regular) */}\n {showDescription && description && (\n <p className=\"text-sm font-normal leading-5 text-content-tertiary dark:text-content-tertiary\">\n {description}\n </p>\n )}\n </div>\n ) : null}\n\n {/* Trigger Button */}\n <button\n ref={triggerRef}\n type=\"button\"\n className={finalTriggerClasses}\n onClick={toggleMenu}\n disabled={disabled}\n aria-label={ariaLabel || label}\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n id={id}\n >\n {/* Selected value or placeholder */}\n <span\n className={\n selectedOption ? '' : 'text-content-secondary dark:text-content-secondary'\n }\n >\n {selectedOption ? selectedOption.label : placeholder}\n </span>\n\n {/* Chevron icon */}\n <ChevronUpDownIcon className={iconClasses} />\n </button>\n\n {/* Hidden input for forms */}\n {name && (\n <input\n type=\"hidden\"\n name={name}\n value={selectedValue !== undefined ? String(selectedValue) : ''}\n />\n )}\n\n {/* Menu */}\n {isOpen && (\n <div ref={menuRef} className={finalMenuClasses} role=\"listbox\">\n {/* Menu Header - Opcional según Figma */}\n {menuHeader && (\n <div className=\"flex items-center gap-0.5 px-6 py-0.5 rounded-[5px]\">\n <span className=\"text-[10px] font-bold leading-[12px] text-content-tertiary dark:text-content-tertiary\">\n {menuHeader}\n </span>\n </div>\n )}\n\n {/* Empty state */}\n {options.length === 0 && (\n <div className=\"px-2 py-1.5 text-[10px] leading-[12px] text-content-secondary dark:text-content-secondary\">\n No hay opciones disponibles\n </div>\n )}\n\n {/* Options */}\n {options.map((option, index) => (\n <div\n key={option.value}\n className={getMenuItemClasses(option, index)}\n onClick={() => handleSelect(option)}\n onMouseEnter={() => setFocusedIndex(index)}\n role=\"option\"\n aria-selected={option.value === selectedValue}\n aria-disabled={option.disabled}\n >\n {/* Check icon for selected item */}\n <div className=\"w-4 flex items-center justify-center\">\n {option.value === selectedValue && <CheckIcon className={checkIconClasses} />}\n </div>\n\n {/* Custom icon if provided */}\n {option.icon && <span className=\"shrink-0 w-4 h-4\">{option.icon}</span>}\n\n {/* Label */}\n <span className=\"flex-1 text-left\">{option.label}</span>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n","import React, { useState } from 'react';\nimport type {\n TableProps,\n TableHeaderProps,\n TableCellProps,\n SortDirection,\n PaginationProps,\n} from './Table.types';\n\n/**\n * Iconos para sort\n */\nconst ChevronUpIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"transition-transform\"\n >\n <path\n d=\"M12 10L8 6L4 10\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ChevronDownIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"transition-transform\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * Iconos para paginación\n */\nconst ArrowLeftIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 8H2M2 8L6.5 3.5M2 8L6.5 12.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ArrowRightIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2 8H14M14 8L9.5 3.5M14 8L9.5 12.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * TableHeader - Componente para el header de una columna\n */\nconst TableHeader = <T,>({\n column,\n sortable,\n sorted,\n sortDirection,\n onSort,\n}: TableHeaderProps<T>) => {\n // Clases base del header\n const baseClasses = `\n flex\n items-center\n gap-3\n px-6\n py-2.5\n min-h-[40px]\n border-b\n border-border-primary\n dark:border-dark-border-primary\n transition-colors\n duration-150\n `;\n\n // Clases según sortable\n const sortableClasses = sortable\n ? `\n cursor-pointer\n hover:bg-background-secondary\n dark:hover:bg-dark-bg-primary/50\n select-none\n `\n : '';\n\n // Clases de alineación\n const alignClasses = {\n left: 'justify-start',\n center: 'justify-center',\n right: 'justify-end',\n };\n\n const combinedClasses = [baseClasses, sortableClasses, alignClasses[column.align || 'left']]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div\n className={combinedClasses}\n onClick={sortable ? onSort : undefined}\n role={sortable ? 'button' : undefined}\n tabIndex={sortable ? 0 : undefined}\n onKeyDown={\n sortable\n ? (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onSort();\n }\n }\n : undefined\n }\n style={{ width: column.width }}\n >\n {/* Texto del header */}\n <span\n className=\"\n text-sm\n font-bold\n text-content-secondary\n dark:text-content-secondary\n text-ellipsis\n overflow-hidden\n whitespace-nowrap\n \"\n >\n {column.header}\n </span>\n\n {/* Iconos de sort */}\n {sortable && (\n <span className=\"shrink-0 text-content-secondary dark:text-content-secondary\">\n {sorted && sortDirection === 'asc' && <ChevronUpIcon />}\n {sorted && sortDirection === 'desc' && <ChevronDownIcon />}\n {!sorted && (\n <div className=\"w-4 h-4\" />\n )}\n </span>\n )}\n </div>\n );\n};\n\n/**\n * TableCell - Componente para una celda de datos\n */\nconst TableCell: React.FC<TableCellProps & { isStriped?: boolean; rowIndex?: number }> = ({\n children,\n align = 'left',\n width,\n isStriped = false,\n rowIndex = 0,\n}) => {\n // Clases de alineación\n const alignClasses = {\n left: 'justify-start text-left',\n center: 'justify-center text-center',\n right: 'justify-end text-right',\n };\n\n // Fondo zebra striping (filas pares tienen fondo)\n const stripedBg = isStriped && rowIndex % 2 === 1\n ? 'bg-background-secondary dark:bg-dark-bg-primary/30'\n : '';\n\n return (\n <div\n className={`\n flex\n flex-col\n ${alignClasses[align]}\n px-6\n py-4\n min-h-[56px]\n border-b\n border-border-secondary\n dark:border-dark-border-primary\n ${stripedBg}\n `}\n style={{ width }}\n >\n <span\n className=\"\n text-sm\n text-content-primary\n dark:text-dark-content-primary\n text-ellipsis\n overflow-hidden\n w-full\n \"\n >\n {children}\n </span>\n </div>\n );\n};\n\n\n/**\n * Pagination - Componente de paginación\n */\nconst Pagination: React.FC<PaginationProps> = ({\n currentPage,\n totalPages,\n onPageChange,\n previousLabel = 'Anterior',\n nextLabel = 'Siguiente',\n}) => {\n // Generar array de números de página para mostrar\n const getPageNumbers = () => {\n const pages: (number | string)[] = [];\n const maxVisible = 7; // Máximo de botones visibles\n\n if (totalPages <= maxVisible) {\n // Si hay pocas páginas, mostrar todas\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i);\n }\n } else {\n // Lógica para mostrar: 1 2 3 ... 65 66\n pages.push(1);\n\n if (currentPage <= 3) {\n pages.push(2, 3);\n } else if (currentPage >= totalPages - 2) {\n pages.push('...');\n pages.push(totalPages - 2, totalPages - 1);\n } else {\n pages.push('...');\n pages.push(currentPage);\n pages.push('...');\n }\n\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n }\n\n return pages;\n };\n\n const pageNumbers = getPageNumbers();\n\n return (\n <div className=\"flex items-center justify-between w-full h-9\">\n {/* Botón Anterior */}\n <button\n onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}\n disabled={currentPage === 1}\n className=\"\n flex\n items-center\n gap-3\n px-3\n py-2\n rounded-md\n text-sm\n font-bold\n text-primary-custom-600\n dark:text-primary-custom-600\n hover:bg-blue-50\n dark:hover:bg-blue-900/20\n disabled:opacity-50\n disabled:cursor-not-allowed\n transition-colors\n duration-150\n \"\n >\n <ArrowLeftIcon />\n <span>{previousLabel}</span>\n </button>\n\n {/* Números de página */}\n <div className=\"flex items-center gap-0\">\n {pageNumbers.map((page, index) => {\n if (page === '...') {\n return (\n <div\n key={`ellipsis-${index}`}\n className=\"\n flex\n items-center\n justify-center\n px-3\n py-2\n text-sm\n font-bold\n text-primary-custom-600\n dark:text-primary-custom-600\n \"\n >\n {page}\n </div>\n );\n }\n\n const isActive = page === currentPage;\n\n return (\n <button\n key={page}\n onClick={() => onPageChange(page as number)}\n className={`\n flex\n items-center\n justify-center\n px-3\n py-2\n rounded-md\n text-sm\n font-bold\n text-primary-custom-600\n dark:text-primary-custom-600\n transition-colors\n duration-150\n ${\n isActive\n ? 'bg-blue-100 dark:bg-blue-900/30'\n : 'hover:bg-blue-50 dark:hover:bg-blue-900/20'\n }\n `}\n >\n {page}\n </button>\n );\n })}\n </div>\n\n {/* Botón Siguiente */}\n <button\n onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}\n disabled={currentPage === totalPages}\n className=\"\n flex\n items-center\n gap-3\n px-3\n py-2\n rounded-md\n text-sm\n font-bold\n text-primary-custom-600\n dark:text-primary-custom-600\n hover:bg-blue-50\n dark:hover:bg-blue-900/20\n disabled:opacity-50\n disabled:cursor-not-allowed\n transition-colors\n duration-150\n \"\n >\n <span>{nextLabel}</span>\n <ArrowRightIcon />\n </button>\n </div>\n );\n};\n\n/**\n * Table - Componente principal de tabla\n *\n * Características implementadas:\n * - Definición de columnas flexible con accessor y render custom\n * - Sorting en columnas (controlado o no controlado)\n * - Variantes: basic, fullWidth, striped, grid\n * - Dark mode completo en todos los estados\n * - Estados de loading y empty\n * - Filas clickeables\n * - Accesibilidad con roles y keyboard navigation\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto y generics\n * - Accesibilidad con ARIA labels y keyboard support\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label/Small para headers, Paragraph/Small para cells)\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/shadows.md - Sistema de sombras\n *\n * @example\n * ```tsx\n * // Uso básico\n * <Table\n * title=\"Usuarios\"\n * columns={[\n * { header: 'Nombre', accessor: 'name' },\n * { header: 'Email', accessor: 'email' },\n * { header: 'Rol', accessor: 'role', sortable: true },\n * ]}\n * data={users}\n * />\n *\n * // Con render custom\n * <Table\n * columns={[\n * {\n * header: 'Estado',\n * accessor: 'status',\n * render: (value) => (\n * <Badge color={value === 'active' ? 'green' : 'red'}>\n * {value}\n * </Badge>\n * ),\n * },\n * ]}\n * data={data}\n * />\n *\n * // Variante striped\n * <Table\n * variant=\"striped\"\n * columns={columns}\n * data={data}\n * />\n * ```\n */\nexport const Table = <T extends Record<string, any>>({\n title,\n columns,\n data,\n variant = 'basic',\n showBorder = true,\n showShadow = true,\n // onRowClick, // TODO: Implement row click functionality\n onSort,\n sortColumn: externalSortColumn,\n sortDirection: externalSortDirection,\n fullWidth = false,\n emptyMessage = 'No hay datos disponibles',\n loading = false,\n loadingRows = 5,\n pagination,\n className = '',\n id,\n}: TableProps<T>) => {\n // ===== ESTADO INTERNO DE SORT =====\n const [internalSortColumn, setInternalSortColumn] = useState<keyof T | string | null>(null);\n const [internalSortDirection, setInternalSortDirection] = useState<SortDirection>(null);\n\n // Usar sort externo si está controlado, sino usar interno\n const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;\n const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;\n\n // ===== MANEJAR SORT =====\n const handleSort = (columnAccessor: keyof T | string) => {\n let newDirection: SortDirection = 'asc';\n\n // Si ya está ordenado por esta columna, cambiar dirección\n if (sortColumn === columnAccessor) {\n if (sortDirection === 'asc') {\n newDirection = 'desc';\n } else if (sortDirection === 'desc') {\n newDirection = null;\n }\n }\n\n // Si sort es controlado, llamar callback\n if (onSort) {\n onSort(columnAccessor, newDirection);\n } else {\n // Sino, actualizar estado interno\n setInternalSortColumn(newDirection ? columnAccessor : null);\n setInternalSortDirection(newDirection);\n }\n };\n\n // ===== OBTENER VALOR DE CELDA =====\n const getCellValue = (row: T, accessor: keyof T | ((row: T) => any)) => {\n if (typeof accessor === 'function') {\n return accessor(row);\n }\n return row[accessor];\n };\n\n // ===== CLASES DEL CONTAINER =====\n const containerBaseClasses = `\n flex\n flex-col\n gap-4\n bg-white\n dark:bg-dark-bg-primary\n rounded-xl\n transition-all\n duration-150\n `;\n\n const containerBorderClasses = showBorder\n ? 'border border-border-primary dark:border-dark-border-primary'\n : '';\n\n const containerShadowClasses = showShadow ? 'shadow-base' : '';\n\n const containerPaddingClasses = 'p-8';\n\n const containerWidthClasses = fullWidth || variant === 'fullWidth' ? 'w-full' : '';\n\n const containerClasses = [\n containerBaseClasses,\n containerBorderClasses,\n containerShadowClasses,\n containerPaddingClasses,\n containerWidthClasses,\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DE LA TABLA =====\n const tableGridClasses = variant === 'grid'\n ? `\n border\n border-border-primary\n dark:border-dark-border-primary\n rounded-lg\n overflow-hidden\n `\n : '';\n\n // ===== RENDER =====\n return (\n <div className={containerClasses} id={id}>\n {/* Título opcional */}\n {title && (\n <div className=\"flex items-center justify-center w-full\">\n <h3\n className=\"\n text-base\n font-bold\n text-content-primary\n dark:text-dark-content-primary\n text-ellipsis\n overflow-hidden\n whitespace-nowrap\n \"\n >\n {title}\n </h3>\n </div>\n )}\n\n {/* Tabla */}\n <div className={`flex w-full overflow-x-auto ${tableGridClasses}`}>\n {/* Columnas */}\n {columns.map((column, colIndex) => {\n const accessor = typeof column.accessor === 'function'\n ? `column_${colIndex}`\n : String(column.accessor);\n\n return (\n <div key={accessor} className=\"flex flex-col flex-1 min-w-0\">\n {/* Header de la columna */}\n <TableHeader\n column={column}\n sortable={column.sortable || false}\n sorted={sortColumn === accessor}\n sortDirection={sortColumn === accessor ? sortDirection : null}\n onSort={() => handleSort(accessor)}\n />\n\n {/* Loading skeleton */}\n {loading && (\n <>\n {Array.from({ length: loadingRows }).map((_, rowIndex) => (\n <TableCell\n key={`loading-${rowIndex}`}\n align={column.align}\n width={column.width}\n isStriped={variant === 'striped'}\n rowIndex={rowIndex}\n >\n <div\n className=\"\n h-4\n bg-background-secondary\n dark:bg-dark-border-primary\n rounded\n animate-pulse\n \"\n />\n </TableCell>\n ))}\n </>\n )}\n\n {/* Datos reales */}\n {!loading && data.length > 0 && (\n <>\n {data.map((row, rowIndex) => {\n const value = getCellValue(row, column.accessor);\n const content = column.render\n ? column.render(value, row, rowIndex)\n : value;\n\n return (\n <TableCell\n key={rowIndex}\n align={column.align}\n width={column.width}\n isStriped={variant === 'striped'}\n rowIndex={rowIndex}\n >\n {content}\n </TableCell>\n );\n })}\n </>\n )}\n\n {/* Estado empty */}\n {!loading && data.length === 0 && colIndex === 0 && (\n <div\n className=\"\n flex\n items-center\n justify-center\n px-6\n py-12\n text-sm\n text-content-secondary\n dark:text-content-secondary\n \"\n style={{ gridColumn: `1 / ${columns.length + 1}` }}\n >\n {emptyMessage}\n </div>\n )}\n </div>\n );\n })}\n </div>\n\n {/* Paginación */}\n {pagination && (\n <Pagination\n currentPage={pagination.currentPage}\n totalPages={pagination.totalPages}\n onPageChange={pagination.onPageChange}\n previousLabel={pagination.previousLabel}\n nextLabel={pagination.nextLabel}\n />\n )}\n </div>\n );\n};\n","import React, { useState } from 'react';\nimport type { TabProps, TabsProps } from './Tabs.types';\n\n/**\n * Componente Tab individual del sistema de diseño Siesa\n *\n * Representa un único tab dentro de un grupo de tabs. Incluye soporte para:\n * - Estado activo/inactivo con indicador visual (línea inferior)\n * - Icono opcional a la izquierda del texto\n * - Badge de notificación con contador\n * - Estados hover, focus y disabled\n * - Dark mode completo\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <Tab\n * label=\"Inicio\"\n * active={true}\n * icon={<HomeIcon />}\n * badge={3}\n * onClick={() => setActiveTab('home')}\n * />\n * ```\n */\nexport const Tab: React.FC<TabProps> = ({\n label,\n active = false,\n icon,\n badge,\n disabled = false,\n onClick,\n className = '',\n ariaLabel,\n}) => {\n // ===== CLASES BASE DEL BOTÓN =====\n // El contenedor es relativo para posicionar el indicador absoluto\n const baseClasses = `\n relative\n flex\n flex-col\n items-center\n cursor-pointer\n outline-hidden\n transition-all\n duration-150\n p-0\n border-0\n bg-transparent\n `;\n\n // ===== CLASES DE FOCUS =====\n // El focus outline se desactiva aquí, el shadow se aplica al Content div\n const focusClasses = '';\n\n // ===== CLASES DE DISABLED =====\n const disabledClasses = disabled\n ? 'opacity-50 cursor-not-allowed pointer-events-none'\n : '';\n\n // ===== CLASES DEL CONTENIDO INTERIOR =====\n // El hover y focus background se aplica aquí\n const contentBaseClasses = `\n flex\n items-center\n justify-center\n gap-1\n p-2\n rounded-lg\n overflow-hidden\n transition-all\n duration-150\n w-full\n `;\n\n // ===== CLASES DE ESTADO HOVER Y FOCUS PARA CONTENIDO =====\n // Light: bg-[rgba(0,0,0,0.03)], Dark: bg-white/5\n // Según Figma, tanto hover como focus tienen el background overlay\n // El shadow de focus también se aplica aquí (al Content div), no al botón\n const contentStateClasses = disabled\n ? ''\n : `\n group-hover:bg-[rgba(0,0,0,0.03)]\n group-focus-visible:bg-[rgba(0,0,0,0.03)]\n group-focus-visible:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\n dark:group-hover:bg-white/5\n dark:group-focus-visible:bg-white/5\n dark:group-focus-visible:shadow-[0px_0px_0px_2px_#1e3a5f,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#0f6ae3]\n `;\n\n // ===== CLASES DE TEXTO =====\n // Activo: primary-custom-600 (#0e79fd), Inactivo: content-primary (#18181b)\n const textClasses = active\n ? `\n text-primary-custom-600\n dark:text-primary-custom-600\n `\n : `\n text-content-primary\n dark:text-dark-content-primary\n `;\n\n // ===== CLASES DE ICONO =====\n // El icono hereda el color del texto\n const iconClasses = `\n w-3\n h-3\n shrink-0\n `;\n\n // ===== CLASES DEL BADGE =====\n // Activo: bg-primary-custom-600 (#0e79fd), Inactivo: bg-content-primary (#18181b)\n const badgeClasses = active\n ? `\n bg-primary-custom-600\n dark:bg-primary-custom-600\n `\n : `\n bg-content-primary\n dark:bg-dark-content-primary\n `;\n\n // ===== CLASES DEL INDICADOR INFERIOR =====\n // Solo visible cuando está activo, 2px de alto, rounded-full\n // Posicionado al fondo del contenedor de Tabs (alineado con el border)\n const indicatorClasses = active\n ? `\n absolute\n -bottom-2.5\n left-0\n right-0\n h-0.5\n rounded-full\n bg-primary-custom-600\n dark:bg-primary-custom-600\n z-10\n `\n : 'hidden';\n\n // ===== COMBINAR CLASES DEL BOTÓN =====\n const finalClasses = [\n baseClasses,\n focusClasses,\n disabledClasses,\n 'group', // Para usar group-hover y group-focus-visible\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== COMBINAR CLASES DEL CONTENIDO =====\n const contentFinalClasses = [\n contentBaseClasses,\n contentStateClasses,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type=\"button\"\n role=\"tab\"\n aria-selected={active}\n aria-disabled={disabled}\n aria-label={ariaLabel || label}\n tabIndex={disabled ? -1 : 0}\n className={finalClasses}\n onClick={disabled ? undefined : onClick}\n disabled={disabled}\n >\n {/* Contenido del Tab */}\n <div className={contentFinalClasses}>\n {/* Icono (opcional) */}\n {icon && (\n <span className={`${iconClasses} ${textClasses}`.trim()}>\n {icon}\n </span>\n )}\n\n {/* Texto */}\n <span\n className={`\n text-sm\n font-bold\n leading-5\n whitespace-nowrap\n ${textClasses}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {label}\n </span>\n\n {/* Badge de notificación (opcional) */}\n {badge !== undefined && badge > 0 && (\n <span\n className={`\n flex\n items-center\n justify-center\n h-3\n min-w-[12px]\n px-0.5\n rounded-xs\n text-xs\n font-normal\n leading-4\n text-primary-inverse-content\n dark:text-dark-bg-primary\n ${badgeClasses}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n aria-label={`${badge} notificaciones`}\n >\n {badge > 99 ? '99+' : badge}\n </span>\n )}\n </div>\n\n {/* Indicador inferior (línea activa) */}\n <div className={indicatorClasses} />\n </button>\n );\n};\n\n/**\n * Componente Tabs contenedor del sistema de diseño Siesa\n *\n * Agrupa múltiples tabs permitiendo navegación entre diferentes secciones.\n * Soporta modo controlado (con activeId y onChange) y no controlado (con defaultActiveId).\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA roles y keyboard navigation\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Modo controlado\n * const [activeTab, setActiveTab] = useState('home');\n *\n * <Tabs\n * items={[\n * { id: 'home', label: 'Inicio', icon: <HomeIcon /> },\n * { id: 'profile', label: 'Perfil', badge: 3 },\n * { id: 'settings', label: 'Configuración' },\n * ]}\n * activeId={activeTab}\n * onChange={setActiveTab}\n * />\n *\n * // Modo no controlado\n * <Tabs\n * items={[...]}\n * defaultActiveId=\"home\"\n * />\n * ```\n */\nexport const Tabs: React.FC<TabsProps> = ({\n items,\n activeId,\n defaultActiveId,\n onChange,\n className = '',\n fullWidth = false,\n size = 'base',\n showBorder = true,\n}) => {\n // Estado interno para modo no controlado\n const [internalActiveId, setInternalActiveId] = useState(\n defaultActiveId || (items.length > 0 ? items[0].id : '')\n );\n\n // Determinar si es controlado o no controlado\n const isControlled = activeId !== undefined;\n const currentActiveId = isControlled ? activeId : internalActiveId;\n\n // Handler para cambio de tab\n const handleTabClick = (id: string) => {\n if (!isControlled) {\n setInternalActiveId(id);\n }\n onChange?.(id);\n };\n\n // ===== CLASES DE TAMAÑO =====\n const sizeClasses = {\n sm: 'gap-0',\n base: 'gap-1',\n lg: 'gap-2',\n };\n\n // ===== CLASES DEL CONTENEDOR =====\n // El padding-bottom (pb-2.5 = 10px) deja espacio para el indicador del tab activo\n // El border-b se dibuja debajo del padding, alineándose con el indicador\n const containerClasses = `\n flex\n items-end\n pb-2.5\n ${sizeClasses[size]}\n ${fullWidth ? 'w-full' : ''}\n ${showBorder ? 'border-b border-border-primary dark:border-dark-border-primary' : ''}\n `;\n\n // ===== CLASES FULL WIDTH PARA ITEMS =====\n const itemWidthClass = fullWidth ? 'flex-1' : '';\n\n const finalClasses = [\n containerClasses,\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div\n role=\"tablist\"\n aria-label=\"Pestañas de navegación\"\n className={finalClasses}\n >\n {items.map((item) => (\n <Tab\n key={item.id}\n label={item.label}\n active={currentActiveId === item.id}\n icon={item.icon}\n badge={item.badge}\n disabled={item.disabled}\n onClick={() => handleTabClick(item.id)}\n className={itemWidthClass}\n />\n ))}\n </div>\n );\n};\n","/**\n * Iconos para el componente Navbar\n * Basados en Heroicons Micro (16x16px)\n */\n\nexport const ShoppingCartIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path d=\"M1.75 1.002a.75.75 0 1 0 0 1.5h1.035l1.38 5.514a2.75 2.75 0 0 0 2.658 2.048h5.355a2.75 2.75 0 0 0 2.658-2.048l.9-3.597a.75.75 0 0 0-.728-.919H4.655l-.22-.88A.75.75 0 0 0 3.71 2H1.75ZM5 13a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM11.5 13a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z\" />\n </svg>\n);\n\nexport const BellIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const MagnifyingGlassIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const ChevronDownIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const ExclamationTriangleIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 7.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nexport const NotificationDot = () => (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n </svg>\n);\n\nexport const ArrowLeftStartOnRectangleIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M14 4.75A2.75 2.75 0 0 0 11.25 2h-3A2.75 2.75 0 0 0 5.5 4.75v.5a.75.75 0 0 0 1.5 0v-.5c0-.69.56-1.25 1.25-1.25h3c.69 0 1.25.56 1.25 1.25v6.5c0 .69-.56 1.25-1.25 1.25h-3c-.69 0-1.25-.56-1.25-1.25v-.5a.75.75 0 0 0-1.5 0v.5A2.75 2.75 0 0 0 8.25 14h3A2.75 2.75 0 0 0 14 11.25v-6.5Zm-9.47.47a.75.75 0 0 0-1.06 0L1.22 7.47a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06l-.97-.97h5.69a.75.75 0 0 0 0-1.5H3.56l.97-.97a.75.75 0 0 0 0-1.06Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { NavbarProps } from './Navbar.types';\nimport { Badge } from '../Badge/Badge';\nimport {\n ShoppingCartIcon,\n BellIcon,\n MagnifyingGlassIcon,\n ChevronDownIcon,\n ExclamationTriangleIcon,\n ArrowLeftStartOnRectangleIcon,\n} from './icons';\n\n/**\n * Componente Navbar del sistema de diseño Siesa\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * Barra de navegación principal con soporte completo para responsive y dark mode.\n * Incluye logo, nombre de producto, badge de ambiente, botones de acción y dropdown de usuario.\n *\n * **Variantes de dispositivo:**\n * - `responsive`: Se adapta automáticamente al viewport (por defecto)\n * - `desktop`: Versión completa (1360x64px) con todos los elementos\n * - `tablet`: Versión tablet (1024x64px) con elementos reducidos\n * - `mobile`: Versión simplificada (428x40px) con logo icono y avatar circular\n *\n * **Elementos incluidos:**\n * - Botón de navegación (solo desktop/tablet) - Usa shadow-button-inset\n * - Logo del negocio (solo desktop/tablet)\n * - Dividers verticales (solo desktop/tablet)\n * - Logo Siesa (completo en desktop/tablet, icono en mobile)\n * - Nombre del producto (solo desktop/tablet) - Heading/Tiny (20px Bold)\n * - Badge de ambiente con icono de advertencia (yellow)\n * - Botones de acción (search solo mobile, cart, notifications)\n * - Dropdown de usuario con avatar, nombre y email\n * - Logo Siesa trailing (solo desktop)\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación (NO colores hardcodeados)\n * - Focus rings adaptativos para light y dark mode\n * - Type safety con TypeScript estricto\n * - Responsive design con breakpoints md: y lg:\n * - Tipografía del sistema: Heading/Tiny, Paragraph/Small, Paragraph/Tiny\n * - Spacing del sistema (4px, 8px, 12px, 16px, 32px)\n *\n * @see docs/colors.md - Sistema de colores y tokens dark mode\n * @see docs/typography.md - Sistema tipográfico (Heading, Paragraph)\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/shadows.md - Sistema de sombras (button-inset)\n *\n * @example\n * ```tsx\n * <Navbar\n * productName=\"Mi Producto\"\n * environmentBadge=\"Ambiente de Pruebas\"\n * userDropdown={{\n * avatar: \"/path/to/avatar.jpg\",\n * name: \"Juan Pérez\",\n * email: \"juan@ejemplo.com\",\n * }}\n * notifications={{\n * cart: 99,\n * bell: true,\n * }}\n * onNavigationClick={() => router.back()}\n * onCartClick={() => openCart()}\n * onNotificationsClick={() => openNotifications()}\n * />\n * ```\n */\nexport const Navbar: React.FC<NavbarProps> = ({\n logo,\n productName = 'Nombre Producto',\n environmentBadge,\n userDropdown,\n actions,\n notifications,\n className = '',\n variant = 'responsive',\n hideActionButtons = false,\n leadingAction,\n siesaLogo,\n showBusinessLogo = false,\n showSiesaLogoLeading = true,\n showSiesaLogoTrailing = false,\n onNavigationClick,\n onSearchClick,\n onCartClick,\n onNotificationsClick,\n}) => {\n // ===== CLASES COMUNES PARA BOTONES DE ACCIÓN =====\n const actionButtonClasses = `\n box-border\n flex\n flex-col\n items-center\n justify-center\n p-1\n relative\n rounded-md\n shrink-0\n text-primary-custom-600\n hover:bg-background-secondary\n active:scale-95\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:text-primary-custom-600\n dark:hover:bg-dark-bg-secondary\n dark:active:scale-95\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n transition-all\n duration-150\n `;\n\n // ===== CLASES PARA BOTÓN DE NAVEGACIÓN PRIMARIO =====\n const navigationButtonClasses = `\n bg-primary-custom-600\n text-primary-inverse-content\n border\n border-primary-custom-600\n shadow-button-inset\n hover:bg-primary-custom-500\n active:scale-95\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:bg-dark-bg-inverse\n dark:text-dark-content-inverse\n dark:border-dark-bg-inverse\n dark:hover:bg-dark-bg-inverse/90\n dark:active:scale-95\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n box-border\n flex\n flex-col\n items-center\n justify-center\n p-3\n relative\n rounded-md\n shrink-0\n transition-all\n duration-150\n `;\n\n // ===== HELPER: Es mobile (variante o responsive en mobile breakpoint) =====\n const isMobile = variant === 'mobile';\n const isDesktop = variant === 'desktop';\n const isTablet = variant === 'tablet';\n const isResponsive = variant === 'responsive';\n\n // ===== BOTÓN DE NAVEGACIÓN =====\n const NavigationButton = () => {\n if (isMobile) return null;\n\n const buttonContent = (\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <ArrowLeftStartOnRectangleIcon />\n </div>\n );\n\n if (isDesktop || isTablet) {\n return (\n <button\n className={navigationButtonClasses}\n aria-label=\"Volver\"\n onClick={onNavigationClick}\n >\n {buttonContent}\n </button>\n );\n }\n\n // Responsive: Solo visible en md: y superiores\n return (\n <button\n className={`hidden md:flex ${navigationButtonClasses}`}\n aria-label=\"Volver\"\n onClick={onNavigationClick}\n >\n {buttonContent}\n </button>\n );\n };\n\n // ===== BUSINESS LOGO (Logo del cliente/producto) =====\n // Solo se muestra si showBusinessLogo es true\n const BusinessLogo = () => {\n if (isMobile || !showBusinessLogo) return null;\n\n const logoContent = (\n <img\n src=\"/,Business Logo.png\"\n alt=\"Business Logo\"\n className=\"w-full h-full object-contain\"\n />\n );\n\n if (isDesktop) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[168px] h-[30px]\">\n {logoContent}\n </div>\n );\n }\n\n if (isTablet) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[140px] h-[25px]\">\n {logoContent}\n </div>\n );\n }\n\n // Responsive: Visible en md: con tamaño desktop, lg: con tamaño completo\n return (\n <div className=\"hidden md:block overflow-hidden relative shrink-0 w-[140px] lg:w-[168px] h-[25px] lg:h-[30px]\">\n {logoContent}\n </div>\n );\n };\n\n // ===== SIESA LOGO (Logo de Siesa - Leading) =====\n // Se controla con showSiesaLogoLeading\n // En mobile siempre se muestra el icono de Siesa en leading\n const SiesaLogoLeading = () => {\n const logoFull = (\n <img\n src=\"/.Siesa Logo.png\"\n alt=\"Siesa\"\n className=\"w-full h-full object-contain\"\n />\n );\n\n const logoMobile = (\n <img\n src=\"/siesa_logo_mobile.png\"\n alt=\"Siesa\"\n className=\"w-full h-full object-contain\"\n />\n );\n\n // En mobile siempre se muestra el icono de Siesa\n if (isMobile) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[30px] h-[30px]\">\n {logoMobile}\n </div>\n );\n }\n\n // En desktop/tablet: Se controla con showSiesaLogoLeading\n if (!showSiesaLogoLeading) return null;\n\n if (isDesktop) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[120px] h-[30px]\">\n {logoFull}\n </div>\n );\n }\n\n if (isTablet) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[100px] h-[25px]\">\n {logoFull}\n </div>\n );\n }\n\n // Responsive\n return (\n <>\n {/* Mobile: Logo icono (30x30) - siempre visible */}\n <div className=\"md:hidden overflow-hidden relative shrink-0 w-[30px] h-[30px]\">\n {logoMobile}\n </div>\n {/* Tablet/Desktop: Se controla con showSiesaLogoLeading */}\n {showSiesaLogoLeading && (\n <>\n {/* Tablet: Logo completo (100x25) */}\n <div className=\"hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]\">\n {logoFull}\n </div>\n {/* Desktop: Logo completo (120x30) */}\n <div className=\"hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]\">\n {logoFull}\n </div>\n </>\n )}\n </>\n );\n };\n\n // ===== SIESA LOGO (Trailing) =====\n // Se controla con showSiesaLogoTrailing\n const SiesaLogoTrailing = () => {\n // Se controla con showSiesaLogoTrailing\n if (!showSiesaLogoTrailing || isMobile) return null;\n\n const logoFull = (\n <img\n src=\"/.Siesa Logo.png\"\n alt=\"Siesa\"\n className=\"w-full h-full object-contain\"\n />\n );\n\n if (isDesktop) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[120px] h-[30px]\">\n {logoFull}\n </div>\n );\n }\n\n if (isTablet) {\n return (\n <div className=\"overflow-hidden relative shrink-0 w-[100px] h-[25px]\">\n {logoFull}\n </div>\n );\n }\n\n // Responsive: Visible en md: (tablet y desktop)\n return (\n <>\n {/* Tablet: Logo completo (100x25) */}\n <div className=\"hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]\">\n {logoFull}\n </div>\n {/* Desktop: Logo completo (120x30) */}\n <div className=\"hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]\">\n {logoFull}\n </div>\n </>\n );\n };\n\n // ===== DIVIDER COMPONENT =====\n const Divider = ({ responsive = true }: { responsive?: boolean }) => {\n const dividerContent = (\n <div className=\"grow shrink-0 w-px min-h-px bg-border-primary dark:bg-dark-border-primary\" />\n );\n\n if (isMobile) return null;\n\n if (isDesktop || isTablet) {\n return (\n <div className=\"flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0\">\n {dividerContent}\n </div>\n );\n }\n\n // Responsive\n if (responsive) {\n return (\n <div className=\"hidden md:flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0\">\n {dividerContent}\n </div>\n );\n }\n\n return null;\n };\n\n // ===== PRODUCT NAME =====\n const ProductName = () => {\n if (isMobile || !productName) return null;\n\n const nameContent = (\n <p className=\"font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap\">\n {productName}\n </p>\n );\n\n if (isDesktop || isTablet) {\n return nameContent;\n }\n\n // Responsive: Solo visible en md:\n return (\n <p className=\"hidden md:block font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap\">\n {productName}\n </p>\n );\n };\n\n // ===== ENVIRONMENT BADGE =====\n const EnvironmentBadge = () => {\n if (!environmentBadge) return null;\n\n if (isMobile) {\n return (\n <Badge\n color=\"yellow\"\n leftIcon={<ExclamationTriangleIcon />}\n label=\"Pruebas\"\n />\n );\n }\n\n if (isDesktop || isTablet) {\n return (\n <Badge\n color=\"yellow\"\n leftIcon={<ExclamationTriangleIcon />}\n label={environmentBadge}\n />\n );\n }\n\n // Responsive: Mostrar badge corto en mobile, completo en desktop\n return (\n <>\n <div className=\"md:hidden\">\n <Badge\n color=\"yellow\"\n leftIcon={<ExclamationTriangleIcon />}\n label=\"Pruebas\"\n />\n </div>\n <div className=\"hidden md:block\">\n <Badge\n color=\"yellow\"\n leftIcon={<ExclamationTriangleIcon />}\n label={environmentBadge}\n />\n </div>\n </>\n );\n };\n\n // ===== SEARCH BUTTON (Solo mobile) =====\n const SearchButton = () => {\n if (hideActionButtons) return null;\n\n if (isMobile) {\n return (\n <button\n className={actionButtonClasses}\n aria-label=\"Buscar\"\n onClick={onSearchClick}\n >\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <MagnifyingGlassIcon />\n </div>\n </button>\n );\n }\n\n if (isResponsive) {\n return (\n <button\n className={`md:hidden ${actionButtonClasses}`}\n aria-label=\"Buscar\"\n onClick={onSearchClick}\n >\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <MagnifyingGlassIcon />\n </div>\n </button>\n );\n }\n\n return null;\n };\n\n // ===== CART BUTTON =====\n const CartButton = () => {\n if (hideActionButtons) return null;\n\n return (\n <div className=\"relative\">\n <button\n className={actionButtonClasses}\n aria-label=\"Carrito de compras\"\n onClick={onCartClick}\n >\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <ShoppingCartIcon />\n </div>\n </button>\n {/* Badge de notificación con número */}\n {notifications?.cart !== undefined && notifications.cart > 0 && (\n <div className=\"absolute bg-error-content dark:bg-error-content flex flex-col gap-2.5 h-4 items-center justify-center left-[calc(50%+8px)] px-1 py-0 rounded-full top-[calc(50%-8px)] -translate-x-1/2 -translate-y-1/2 pointer-events-none min-w-[16px]\">\n <p className=\"font-bold leading-3 text-[10px] text-white text-center whitespace-nowrap\">\n {notifications.cart > 99 ? '+99' : notifications.cart}\n </p>\n </div>\n )}\n </div>\n );\n };\n\n // ===== NOTIFICATIONS BUTTON =====\n const NotificationsButton = () => {\n if (hideActionButtons) return null;\n\n return (\n <div className=\"relative\">\n <button\n className={actionButtonClasses}\n aria-label=\"Notificaciones\"\n onClick={onNotificationsClick}\n >\n <div className=\"overflow-hidden relative shrink-0 w-4 h-4\">\n <BellIcon />\n </div>\n </button>\n {/* Badge de notificación dot */}\n {notifications?.bell && (\n <div className=\"absolute w-2 h-2 bg-error-content dark:bg-error-content rounded-full left-[calc(50%+4px)] top-[calc(50%-8px)] -translate-x-1/2 pointer-events-none\" />\n )}\n </div>\n );\n };\n\n // ===== USER DROPDOWN =====\n const UserDropdown = () => {\n if (!userDropdown) return null;\n\n const dropdownButtonClasses = `\n box-border\n flex\n items-center\n justify-center\n overflow-hidden\n p-0\n relative\n shrink-0\n hover:bg-background-secondary\n active:scale-95\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:hover:bg-dark-bg-secondary\n dark:active:scale-95\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n rounded-lg\n transition-all\n duration-150\n `;\n\n // Mobile: Solo avatar circular\n if (isMobile) {\n return (\n <button\n className={dropdownButtonClasses}\n onClick={userDropdown.onMenuClick}\n aria-label=\"Menú de usuario\"\n >\n <div className=\"relative rounded-full shrink-0 w-8 h-8\">\n <img\n alt={userDropdown.name}\n className=\"absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full\"\n src={userDropdown.avatar}\n />\n </div>\n </button>\n );\n }\n\n // Desktop/Tablet: Avatar + info + chevron\n const renderFullDropdown = () => (\n <button\n className={dropdownButtonClasses}\n onClick={userDropdown.onMenuClick}\n aria-label=\"Menú de usuario\"\n >\n <div className=\"box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0\">\n <div className=\"flex gap-3 items-center justify-center relative shrink-0\">\n {/* Avatar */}\n <div className=\"flex items-center justify-center relative shrink-0\">\n <div className=\"relative rounded-md shrink-0 w-10 h-10\">\n <img\n alt={userDropdown.name}\n className=\"absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full\"\n src={userDropdown.avatar}\n />\n </div>\n </div>\n {/* Nombre y email/rol */}\n <div className=\"flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]\">\n <p className=\"leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal\">\n {userDropdown.name}\n </p>\n {(userDropdown.email || userDropdown.role) && (\n <p className=\"leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis\">\n {userDropdown.email || userDropdown.role}\n </p>\n )}\n </div>\n </div>\n {/* Chevron down icon */}\n <div className=\"overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary\">\n <ChevronDownIcon />\n </div>\n </div>\n </button>\n );\n\n if (isDesktop || isTablet) {\n return renderFullDropdown();\n }\n\n // Responsive\n return (\n <>\n {/* Mobile: Solo avatar circular */}\n <button\n className={`md:hidden ${dropdownButtonClasses}`}\n onClick={userDropdown.onMenuClick}\n aria-label=\"Menú de usuario\"\n >\n <div className=\"relative rounded-full shrink-0 w-8 h-8\">\n <img\n alt={userDropdown.name}\n className=\"absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full\"\n src={userDropdown.avatar}\n />\n </div>\n </button>\n {/* Desktop/Tablet: Avatar + info + chevron */}\n <button\n className={`hidden md:flex ${dropdownButtonClasses}`}\n onClick={userDropdown.onMenuClick}\n aria-label=\"Menú de usuario\"\n >\n <div className=\"box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0\">\n <div className=\"flex gap-3 items-center justify-center relative shrink-0\">\n {/* Avatar */}\n <div className=\"flex items-center justify-center relative shrink-0\">\n <div className=\"relative rounded-md shrink-0 w-10 h-10\">\n <img\n alt={userDropdown.name}\n className=\"absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full\"\n src={userDropdown.avatar}\n />\n </div>\n </div>\n {/* Nombre y email/rol */}\n <div className=\"flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]\">\n <p className=\"leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal\">\n {userDropdown.name}\n </p>\n {(userDropdown.email || userDropdown.role) && (\n <p className=\"leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis\">\n {userDropdown.email || userDropdown.role}\n </p>\n )}\n </div>\n </div>\n {/* Chevron down icon */}\n <div className=\"overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary\">\n <ChevronDownIcon />\n </div>\n </div>\n </button>\n </>\n );\n };\n\n // ===== CLASES BASE DEL NAVBAR =====\n const baseClasses = `\n box-border\n flex\n gap-8\n items-center\n px-4\n py-1\n relative\n w-full\n bg-background-primary\n dark:bg-dark-bg-primary\n `;\n\n // ===== CLASES PARA VARIANTES DE ALTURA =====\n const variantClasses = {\n responsive: 'h-[40px] md:h-16',\n desktop: 'h-16',\n tablet: 'h-16',\n mobile: 'h-[40px]',\n };\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [baseClasses, variantClasses[variant], className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <nav className={finalClasses}>\n {/* ===== SECCIÓN LEADING (IZQUIERDA) ===== */}\n <div className=\"flex gap-4 items-center relative shrink-0\">\n {/* Botón de navegación o acción leading personalizada (solo desktop/tablet) */}\n {!isMobile && (leadingAction || <NavigationButton />)}\n\n {/* Business Logo (logo del cliente) - solo cuando showBusinessLogo=true */}\n {logo || <BusinessLogo />}\n\n {/* Divider después de Business Logo - Solo cuando hay Business Logo Y hay Siesa Logo en leading */}\n {showBusinessLogo && showSiesaLogoLeading && !isMobile && <Divider />}\n\n {/* Siesa Logo en leading - Se controla con showSiesaLogoLeading */}\n {siesaLogo || <SiesaLogoLeading />}\n\n {/* Divider antes del nombre - Solo cuando hay Siesa Logo en leading y nombre de producto */}\n {productName && showSiesaLogoLeading && !isMobile && <Divider />}\n\n {/* Nombre del Producto - Solo desktop/tablet */}\n <ProductName />\n </div>\n\n {/* ===== SECCIÓN TRAILING (DERECHA) ===== */}\n <div className=\"flex gap-4 items-center justify-end grow min-h-px min-w-px relative shrink-0\">\n {/* Badge de Ambiente */}\n <EnvironmentBadge />\n\n {/* Botón de búsqueda - Solo mobile */}\n <SearchButton />\n\n {/* Botón de carrito de compras */}\n <CartButton />\n\n {/* Botón de notificaciones */}\n <NotificationsButton />\n\n {/* Divider antes del dropdown - Solo desktop/tablet */}\n {userDropdown && !hideActionButtons && <Divider />}\n\n {/* Dropdown de usuario */}\n <UserDropdown />\n\n {/* Divider antes del logo Siesa trailing - Solo cuando showSiesaLogoTrailing=true */}\n {showSiesaLogoTrailing && userDropdown && !isMobile && <Divider />}\n\n {/* Logo Siesa trailing - Solo desktop */}\n <SiesaLogoTrailing />\n\n {/* Actions adicionales */}\n {actions && <div className=\"flex gap-2 items-center\">{actions}</div>}\n </div>\n </nav>\n );\n};\n","import React from 'react';\nimport type { NavigationBarProps, NavigationBarItem } from './NavigationBar.types';\n\n/**\n * NavigationBar del sistema de diseño Siesa\n *\n * **Componente de navegación inferior (Bottom Navigation Bar) para móvil.**\n * Permite al usuario navegar entre vistas principales de la aplicación.\n * Diseñado para contener 3-5 ítems de navegación.\n *\n * **🔄 Navegación Responsive:**\n * El NavigationRail (navegación lateral vertical) se convierte en NavigationBar\n * (navegación inferior horizontal) cuando la pantalla es móvil. Esta es una\n * práctica recomendada de UX para aprovechar mejor el espacio en diferentes\n * dispositivos:\n * - **Desktop/Tablet**: Usar NavigationRail (lateral)\n * - **Mobile**: Usar NavigationBar (inferior)\n *\n * **Características:**\n * - Soporta hasta 5 ítems de navegación (recomendado: 3-5)\n * - Cada ítem tiene icono + label\n * - Indicador visual de ítem activo (fondo azul claro)\n * - Estados: active, hover, disabled\n * - Dark mode completo\n * - Accesibilidad con ARIA labels\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Tipografía Label XXSmall (10px Bold) según sistema de diseño\n * - Iconos de 16x16px según especificaciones de Figma\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label XXSmall)\n * @see docs/spacing.md - Sistema de espaciado\n * @see NavigationRail - Componente de navegación lateral para desktop\n *\n * @example\n * ```tsx\n * const items = [\n * { id: 'home', icon: <HomeIcon />, label: 'Inicio', active: true },\n * { id: 'search', icon: <SearchIcon />, label: 'Buscar' },\n * { id: 'profile', icon: <ProfileIcon />, label: 'Perfil' },\n * ];\n *\n * <NavigationBar\n * items={items}\n * activeItemId=\"home\"\n * onItemClick={(id) => console.log('Clicked:', id)}\n * />\n * ```\n *\n * @example\n * // Patrón responsive: NavigationRail en desktop, NavigationBar en mobile\n * ```tsx\n * function ResponsiveNav() {\n * return (\n * <>\n * // NavigationRail para desktop/tablet\n * <div className=\"hidden md:block\">\n * <NavigationRail items={items} />\n * </div>\n *\n * // NavigationBar para móvil\n * <div className=\"md:hidden fixed bottom-0 left-0 right-0 z-50\">\n * <NavigationBar items={items} />\n * </div>\n * </>\n * );\n * }\n * ```\n */\nexport const NavigationBar: React.FC<NavigationBarProps> = ({\n items,\n activeItemId,\n onItemClick,\n className = '',\n ariaLabel = 'Navegación Principal',\n}) => {\n // ===== VALIDACIÓN: Máximo 5 ítems =====\n if (items.length > 5) {\n console.warn('NavigationBar: Se recomienda un máximo de 5 ítems para mejor UX');\n }\n\n // ===== HANDLER DE CLICK =====\n const handleItemClick = (item: NavigationBarItem) => {\n if (item.disabled) return;\n\n // Llamar onClick del ítem individual si existe\n if (item.onClick) {\n item.onClick(item.id);\n }\n\n // Llamar onItemClick global si existe\n if (onItemClick) {\n onItemClick(item.id);\n }\n };\n\n // ===== RENDERIZAR ÍTEM =====\n const renderItem = (item: NavigationBarItem) => {\n const isActive = item.active || item.id === activeItemId;\n\n // ===== CLASES DEL CONTENEDOR DEL ÍTEM =====\n const itemContainerClasses = `\n flex-1\n flex\n flex-col\n items-center\n gap-1\n px-0.5\n py-0\n min-w-0\n cursor-pointer\n transition-all\n duration-150\n ${item.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL ICON CONTAINER =====\n // Fondo azul claro cuando está activo (rgb(219, 238, 254) = #dbeefe = primary-custom-100)\n // En dark mode usa el mismo color opaco según Figma\n const iconContainerClasses = `\n flex\n items-center\n justify-center\n px-4\n py-1\n rounded-full\n overflow-hidden\n transition-all\n duration-150\n ${\n isActive\n ? 'bg-primary-custom-100 dark:bg-primary-custom-100'\n : 'bg-transparent hover:bg-hover-overlay dark:hover:bg-hover-overlay-dark'\n }\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL LABEL =====\n // Label XXSmall: 10px Bold, line-height 12px (según typography.md y Figma)\n const labelClasses = `\n font-['SiesaBT:Bold',sans-serif]\n text-[10px]\n leading-[12px]\n font-bold\n text-center\n w-full\n min-w-0\n text-content-primary\n dark:text-dark-content-primary\n transition-colors\n duration-150\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL ICONO =====\n // Iconos de 16x16px según Figma\n const iconClasses = `\n w-4\n h-4\n shrink-0\n text-content-primary\n dark:text-dark-content-primary\n transition-colors\n duration-150\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n key={item.id}\n type=\"button\"\n className={itemContainerClasses}\n onClick={() => handleItemClick(item)}\n disabled={item.disabled}\n aria-label={item.ariaLabel || item.label}\n aria-current={isActive ? 'page' : undefined}\n >\n {/* Icon Container */}\n <div className={iconContainerClasses}>\n <span className={iconClasses}>{item.icon}</span>\n </div>\n\n {/* Label */}\n <span className={labelClasses}>{item.label}</span>\n </button>\n );\n };\n\n // ===== CLASES DEL CONTENEDOR PRINCIPAL =====\n const containerClasses = `\n bg-bg-primary\n dark:bg-dark-bg-primary\n p-4\n w-full\n transition-colors\n duration-150\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL MENU (Contenedor de ítems) =====\n const menuClasses = `\n flex\n items-start\n justify-center\n w-full\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== CLASES DEL DESTINATIONS (Contenedor con gap) =====\n const destinationsClasses = `\n flex-1\n flex\n items-start\n gap-2\n min-h-0\n min-w-0\n `\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <nav\n className={`${containerClasses} ${className}`.trim()}\n role=\"navigation\"\n aria-label={ariaLabel}\n >\n <div className={menuClasses}>\n <div className={destinationsClasses}>\n {items.map((item) => renderItem(item))}\n </div>\n </div>\n </nav>\n );\n};\n","import React from 'react';\n\n/**\n * Icono de convención para POSConvention\n *\n * Círculo SVG de 16x16px con colores diferentes para Light y Dark mode.\n * Basado en especificaciones de Figma:\n * - Light mode: node-id 4418-40139\n * - Dark mode: node-id 4418-40349\n *\n * Usa dos círculos superpuestos con clases CSS para alternar entre modos.\n *\n * @param lightColor - Color hexadecimal para Light mode\n * @param darkColor - Color hexadecimal para Dark mode\n * @param className - Clases CSS adicionales (opcional)\n */\nexport const ConventionIcon: React.FC<{\n lightColor: string;\n darkColor: string;\n className?: string;\n}> = ({ lightColor, darkColor, className = '' }) => (\n <svg\n className={`w-4 h-4 shrink-0 ${className}`.trim()}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n {/* Círculo para Light mode - visible por defecto, oculto en dark */}\n <circle\n cx=\"8\"\n cy=\"8\"\n r=\"8\"\n fill={lightColor}\n className=\"dark:hidden\"\n />\n {/* Círculo para Dark mode - oculto por defecto, visible en dark */}\n <circle\n cx=\"8\"\n cy=\"8\"\n r=\"8\"\n fill={darkColor}\n className=\"hidden dark:block\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { POSConventionProps } from './POSConvention.types';\nimport { ConventionIcon } from './icons';\n\n/**\n * POSConvention - Componente de leyenda/convención para estados de mesas POS\n *\n * Muestra un indicador circular de color con su respectiva etiqueta según el diseño de Figma.\n * Se usa típicamente para crear leyendas que explican el significado de colores en el sistema POS.\n *\n * **Colores según Figma (node-id: 4418-40139):**\n *\n * | Estado | Light Mode | Dark Mode |\n * |--------|------------|-----------|\n * | Available | #0e79fd (azul) | #93d1fd (azul claro) |\n * | Occupied | #af460e (naranja) | #f5a927 (amarillo) |\n * | Reserved | #7e22ce (morado) | #c084fc (morado claro) |\n * | Out of Service | #3f3f46 (gris) | #a1a1aa (gris claro) |\n *\n * **Dimensiones según Figma:**\n * - Icono: 16x16px (círculo con fill)\n * - Texto: 12px (Paragraph/Tiny - text-xs)\n * - Gap: 4px (gap-1)\n * - Line-height: 16px (leading-4)\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Colores exactos de Figma para Light y Dark mode\n * - Type safety con TypeScript estricto\n * - Accesibilidad con aria-label\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Paragraph Tiny)\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Indicador de disponible\n * <POSConvention status=\"available\" />\n *\n * // Indicador de ocupada\n * <POSConvention status=\"occupied\" />\n *\n * // Leyenda completa en contenedor\n * <div className=\"p-5 rounded-lg border border-dashed border-primary-custom-300\">\n * <div className=\"flex flex-col gap-9\">\n * <POSConvention status=\"available\" />\n * <POSConvention status=\"occupied\" />\n * <POSConvention status=\"reserved\" />\n * <POSConvention status=\"outOfService\" />\n * </div>\n * </div>\n * ```\n */\nexport const POSConvention: React.FC<POSConventionProps> = ({\n status = 'available',\n className = '',\n}) => {\n // ===== CONFIGURACIÓN DE COLORES Y LABELS SEGÚN FIGMA =====\n // Colores extraídos del nodo 4418-40139 (Light) y 4418-40349 (Dark) de Figma\n // Variables de Figma: contentCustomPrimary, contentYellow, contentPurple, contentZinc\n const conventionConfig = {\n available: {\n lightColor: '#0e79fd', // Azul - contentCustomPrimary Light\n darkColor: '#93d1fd', // Azul claro - contentCustomPrimary Dark\n label: 'Disponible',\n },\n occupied: {\n lightColor: '#af460e', // Naranja - contentOrange Light\n darkColor: '#f5a927', // Amarillo - contentYellow Dark\n label: 'Ocupada',\n },\n reserved: {\n lightColor: '#7e22ce', // Morado - contentPurple Light\n darkColor: '#c084fc', // Morado claro - contentPurple Dark\n label: 'Reservada',\n },\n outOfService: {\n lightColor: '#3f3f46', // Gris - contentZinc Light (zinc-700)\n darkColor: '#a1a1aa', // Gris claro - contentZinc Dark (zinc-400)\n label: 'Fuera de Servicio',\n },\n };\n\n const config = conventionConfig[status];\n\n // ===== CLASES BASE =====\n const baseClasses = `\n inline-flex\n items-center\n gap-1\n shrink-0\n `;\n\n // ===== COMBINAR CLASES =====\n const finalClasses = [baseClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <div\n className={finalClasses}\n role=\"presentation\"\n aria-label={`Estado: ${config.label}`}\n >\n {/* Icono circular 16x16 con colores para Light y Dark mode */}\n <ConventionIcon lightColor={config.lightColor} darkColor={config.darkColor} />\n\n {/* Label de texto según Figma: Paragraph/Tiny 12px */}\n {/* Light: contentPrimary #18181b, Dark: contentPrimary #f4f4f5 */}\n <span\n className={`\n text-xs\n leading-4\n font-normal\n text-content-primary\n dark:text-dark-content-primary\n whitespace-nowrap\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {config.label}\n </span>\n </div>\n );\n};\n","import React from 'react';\n\n/**\n * Icono Check (✓) para estado Available\n * Tamaño: 12x12px\n */\nexport const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M10 3L4.5 8.5L2 6\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * Icono X Mark para estado Occupied\n * Tamaño: 12x12px\n */\nexport const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M9 3L3 9M3 3L9 9\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * Icono Calendar para estado Reserved\n * Tamaño: 12x12px\n */\nexport const CalendarIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M10.5 5H1.5M8.5 1V3M3.5 1V3M3.25 11H8.75C9.57843 11 10.25 10.3284 10.25 9.5V3.5C10.25 2.67157 9.57843 2 8.75 2H3.25C2.42157 2 1.75 2.67157 1.75 3.5V9.5C1.75 10.3284 2.42157 11 3.25 11Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/**\n * Icono No Symbol (Prohibido) para estado Out of Service\n * Tamaño: 12x12px\n */\nexport const NoSymbolIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M10.5 6C10.5 8.48528 8.48528 10.5 6 10.5C3.51472 10.5 1.5 8.48528 1.5 6C1.5 3.51472 3.51472 1.5 6 1.5C8.48528 1.5 10.5 3.51472 10.5 6Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n />\n <path\n d=\"M9.18198 2.81802L2.81802 9.18198\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n />\n </svg>\n);\n\n/**\n * Icono de Usuario/Personas para mostrar capacidad\n * Tamaño: 13x10px (según especificaciones de Figma)\n */\nexport const UsersIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"13\"\n height=\"10\"\n viewBox=\"0 0 13 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n d=\"M9.25 9V8C9.25 6.89543 8.35457 6 7.25 6H2.75C1.64543 6 0.75 6.89543 0.75 8V9M12.25 9V8C12.25 6.89543 11.3546 6 10.25 6H9.75M7 2.5C7 3.60457 6.10457 4.5 5 4.5C3.89543 4.5 3 3.60457 3 2.5C3 1.39543 3.89543 0.5 5 0.5C6.10457 0.5 7 1.39543 7 2.5ZM10 2C10 2.82843 9.32843 3.5 8.5 3.5C7.67157 3.5 7 2.82843 7 2C7 1.17157 7.67157 0.5 8.5 0.5C9.32843 0.5 10 1.17157 10 2Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { POSLocationButtonProps } from './POSLocationButton.types';\nimport { CheckIcon, XMarkIcon, CalendarIcon, NoSymbolIcon, UsersIcon } from './icons';\n\n/**\n * POSLocationButton del sistema de diseño Siesa\n *\n * Botón especializado para punto de venta (POS) que muestra el estado de disponibilidad\n * de una ubicación física (mesa, salón, terraza, etc.) con indicadores visuales claros.\n *\n * **Estados de disponibilidad (status):**\n * - `available`: Disponible (verde/lime) con icono ✓\n * - `occupied`: Ocupada (naranja/yellow) con icono ✗\n * - `reserved`: Reservada (morado/purple) con icono 📅\n * - `outOfService`: Fuera de servicio (gris/zinc) con icono 🚫\n *\n * **Estados visuales (state):**\n * - `enabled`: Estado normal con fondo blanco/dark\n * - `actived`: Estado seleccionado con fondo coloreado\n *\n * **Características:**\n * - Ancho flexible: por defecto ocupa el 100% del contenedor (fullWidth=true)\n * - Altura fija: 68px (optimizado para interfaces POS)\n * - Muestra nombre de ubicación y capacidad (ej: \"1/8 mesas\")\n * - Badge visual con icono y texto del estado\n * - Dark mode completo en todos los estados\n * - Focus ring adaptativo\n * - Transiciones suaves\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * // Ubicación disponible\n * <POSLocationButton\n * locationName=\"Antejardín\"\n * status=\"available\"\n * capacity={{ current: 1, total: 8 }}\n * onClick={() => console.log('Seleccionado')}\n * />\n *\n * // Ubicación ocupada y seleccionada\n * <POSLocationButton\n * locationName=\"Terraza\"\n * status=\"occupied\"\n * state=\"actived\"\n * capacity={{ current: 5, total: 8 }}\n * />\n *\n * // Ubicación reservada\n * <POSLocationButton\n * locationName=\"Salón Principal\"\n * status=\"reserved\"\n * capacity={{ current: 3, total: 12 }}\n * />\n *\n * // Fuera de servicio\n * <POSLocationButton\n * locationName=\"Bar\"\n * status=\"outOfService\"\n * disabled\n * />\n * ```\n */\nexport const POSLocationButton: React.FC<POSLocationButtonProps> = ({\n locationName,\n status = 'available',\n state = 'enabled',\n capacity,\n onClick,\n disabled = false,\n className = '',\n ariaLabel,\n fullWidth = true,\n}) => {\n // ===== CONFIGURACIÓN DE COLORES POR STATUS =====\n // Mapeo de colores según especificaciones de Figma (pixel-perfect)\n const statusConfig = {\n available: {\n // Azul Primary Custom (según Figma: #0e79fd)\n textColor: 'text-primary-custom-600 dark:text-primary-custom-600',\n badgeBg: 'bg-primary-custom-100 dark:bg-blue-900/30',\n badgeText: 'text-primary-custom-600 dark:text-blue-400',\n activedBg: 'bg-primary-custom-100 dark:bg-blue-900/30',\n icon: CheckIcon,\n badgeLabel: 'Disponible',\n },\n occupied: {\n // Naranja/Yellow (según Figma: #af460e para texto, #fcedc9 para fondo)\n textColor: 'text-[#af460e] dark:text-orange-400',\n badgeBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',\n badgeText: 'text-[#af460e] dark:text-orange-400',\n activedBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',\n icon: XMarkIcon,\n badgeLabel: 'Ocupada',\n },\n reserved: {\n // Morado/Purple (según Figma: #7e22ce para texto, #f3e8ff para fondo)\n textColor: 'text-[#7e22ce] dark:text-fuchsia-400',\n badgeBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',\n badgeText: 'text-[#7e22ce] dark:text-purple-400',\n activedBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',\n icon: CalendarIcon,\n badgeLabel: 'Reservada',\n },\n outOfService: {\n // Gris/Zinc (según Figma: #3f3f46 para texto, #f4f4f5 para fondo)\n textColor: 'text-[#3f3f46] dark:text-zinc-400',\n badgeBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',\n badgeText: 'text-content-tertiary dark:text-zinc-400',\n activedBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',\n icon: NoSymbolIcon,\n badgeLabel: 'F. de Servicio',\n },\n };\n\n const config = statusConfig[status];\n const StatusIcon = config.icon;\n\n // ===== CLASES DE FONDO SEGÚN STATE =====\n const backgroundClasses =\n state === 'actived'\n ? config.activedBg // Fondo coloreado cuando está activo\n : 'bg-white dark:bg-dark-bg-primary'; // Fondo blanco/dark cuando está enabled\n\n // ===== CLASES DE ANCHO =====\n const widthClasses = fullWidth ? 'w-full' : 'w-[189px]';\n\n // ===== CLASES BASE =====\n const baseClasses = `\n flex\n flex-col\n items-stretch\n justify-between\n ${widthClasses}\n h-[68px]\n p-2\n rounded-lg\n cursor-pointer\n transition-all\n duration-150\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n hover:shadow-md\n active:scale-[0.98]\n disabled:opacity-50\n disabled:cursor-not-allowed\n disabled:pointer-events-none\n `;\n\n // ===== COMBINAR CLASES =====\n const buttonClasses = [baseClasses, backgroundClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== FORMATEAR TEXTO DE CAPACIDAD =====\n const capacityText = capacity\n ? `${capacity.current}/${capacity.total} mesas`\n : null;\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n aria-label={ariaLabel || `${locationName} - ${config.badgeLabel}`}\n type=\"button\"\n >\n {/* ===== TÍTULO (Nombre de ubicación) ===== */}\n <div\n className={`\n text-base\n font-bold\n leading-6\n ${config.textColor}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {locationName}\n </div>\n\n {/* ===== CONTENIDO (Capacidad + Badge) ===== */}\n <div className=\"flex items-center justify-between\">\n {/* Capacidad (izquierda) */}\n {capacityText && (\n <div className=\"flex items-center gap-1\">\n <UsersIcon className={config.textColor} />\n <span\n className={`\n text-[10px]\n leading-[12px]\n ${config.textColor}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {capacityText}\n </span>\n </div>\n )}\n\n {/* Badge (derecha) */}\n <div\n className={`\n inline-flex\n items-center\n gap-1\n px-1.5\n py-1\n rounded-md\n ${config.badgeBg}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n <StatusIcon className={config.badgeText} />\n <span\n className={`\n text-xs\n leading-4\n ${config.badgeText}\n `\n .replace(/\\s+/g, ' ')\n .trim()}\n >\n {config.badgeLabel}\n </span>\n </div>\n </div>\n </button>\n );\n};\n","import React from 'react';\nimport type { POSNumberButtonProps } from './POSNumberButton.types';\n\n/**\n * Componente POSNumberButton del sistema de diseño Siesa\n * Botón numérico especializado para sistemas POS (Point of Sale)\n *\n * Basado en especificaciones de Figma con Tailwind CSS\n *\n * **Características principales:**\n * - Diseñado para pantallas táctiles y POS\n * - Tipografía Display Tiny (48px Bold) para números grandes\n * - Tres tamaños: Small (40x40), Medium (65x65), Large (80x80)\n * - Opción de borde visible o sin borde\n * - Estados: Default, Hover, Active, Disabled\n * - Touch-friendly: active:scale-95 para feedback táctil\n *\n * **Variantes:**\n * - `border=false`: Botón sin borde, hover cambia a primary\n * - `border=true`: Botón con borde, hover resalta el borde\n *\n * **Tamaños:**\n * - `s` (40x40px): Compacto, para teclados numéricos pequeños\n * - `m` (65x65px): Mediano, tamaño intermedio\n * - `l` (80x80px): Grande, tamaño por defecto para POS\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Tokens de color consistentes con la documentación\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n * - Feedback visual inmediato con active:scale-95\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Display Tiny)\n * @see docs/spacing.md - Sistema de espaciado\n * @see src/components/Button/Button.tsx - Componente Button de referencia\n *\n * @example\n * ```tsx\n * // Botón numérico grande (POS)\n * <POSNumberButton size=\"l\">1</POSNumberButton>\n *\n * // Botón con borde\n * <POSNumberButton size=\"l\" border>2</POSNumberButton>\n *\n * // Botón compacto\n * <POSNumberButton size=\"s\">3</POSNumberButton>\n *\n * // Teclado numérico completo\n * <div className=\"grid grid-cols-3 gap-2\">\n * {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (\n * <POSNumberButton key={num} size=\"m\" onClick={() => handleInput(num)}>\n * {num}\n * </POSNumberButton>\n * ))}\n * </div>\n * ```\n */\nexport const POSNumberButton: React.FC<POSNumberButtonProps> = ({\n size = 'l',\n border = false,\n children,\n disabled = false,\n className = '',\n onClick,\n ariaLabel,\n htmlType = 'button',\n ...rest\n}) => {\n // ===== CLASES DE TAMAÑO =====\n // Basado en especificaciones de Figma: L=80x80, M=65x65, S=40x40\n const sizeClasses = {\n s: 'w-10 h-10', // 40x40px\n m: 'w-[65px] h-[65px]', // 65x65px\n l: 'w-20 h-20', // 80x80px\n };\n\n // ===== CLASES DE TEXTO =====\n // Display Tiny (48px Bold) según typography.md → text-5xl\n // Para tamaño small, reducimos a text-2xl (24px)\n const textSizeClasses = {\n s: 'text-2xl', // 24px para botones pequeños\n m: 'text-5xl', // 48px Display Tiny\n l: 'text-5xl', // 48px Display Tiny\n };\n\n // ===== CLASES DE ESTADO (Sin Borde) =====\n const noBorderStateClasses = `\n bg-white\n text-content-primary\n hover:bg-primary-custom-600\n hover:text-primary-inverse-content\n active:bg-primary-custom-600\n active:text-primary-inverse-content\n active:scale-95\n dark:bg-dark-bg-primary\n dark:text-dark-content-primary\n dark:hover:bg-dark-bg-inverse\n dark:hover:text-dark-content-inverse\n dark:active:bg-dark-bg-inverse\n dark:active:text-dark-content-inverse\n dark:active:scale-95\n `;\n\n // ===== CLASES DE ESTADO (Con Borde) =====\n const withBorderStateClasses = `\n bg-white\n text-content-primary\n border\n border-border-primary\n hover:bg-primary-custom-600\n hover:text-primary-inverse-content\n hover:border-primary-inverse-border\n active:bg-primary-custom-600\n active:text-primary-inverse-content\n active:border-primary-inverse-border\n active:scale-95\n dark:bg-dark-bg-primary\n dark:text-dark-content-primary\n dark:border-dark-border-primary\n dark:hover:bg-dark-bg-inverse\n dark:hover:text-dark-content-inverse\n dark:hover:border-primary-inverse-border\n dark:active:bg-dark-bg-inverse\n dark:active:text-dark-content-inverse\n dark:active:border-primary-inverse-border\n dark:active:scale-95\n `;\n\n // ===== CLASES BASE =====\n const baseClasses = `\n inline-flex\n items-center\n justify-center\n rounded-lg\n font-bold\n tracking-tighter\n whitespace-nowrap\n cursor-pointer\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n disabled:opacity-50\n disabled:cursor-not-allowed\n disabled:pointer-events-none\n transition-all\n duration-150\n `;\n\n // ===== COMBINAR TODAS LAS CLASES =====\n const buttonClasses = [\n baseClasses,\n sizeClasses[size],\n textSizeClasses[size],\n border ? withBorderStateClasses : noBorderStateClasses,\n className,\n ]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type={htmlType}\n className={buttonClasses}\n disabled={disabled}\n onClick={onClick}\n aria-label={ariaLabel || `Número ${children}`}\n {...rest}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport type { POSProductButtonProps } from './POSProductButton.types';\n\n/**\n * Componente POSProductButton del sistema de diseño Siesa\n *\n * Botón especializado para sistemas POS que combina una imagen de producto\n * con un label descriptivo. Diseñado para selección rápida de productos.\n *\n * **Estados disponibles:**\n * - `default`: Estado normal con fondo blanco\n * - `active`: Estado seleccionado con fondo azul claro y texto azul\n * - `disabled`: Estado deshabilitado con opacidad reducida\n *\n * **Características:**\n * - Imagen con aspect ratio 158:80 (proporción de Figma)\n * - Label con tipografía Label Small (14px Bold)\n * - Soporte completo de dark mode\n * - Estados hover, active y focus\n * - Transiciones suaves\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Tokens de color consistentes con la documentación\n * - Estados hover y active completos\n * - Tipografía Label Small (14px Bold) según sistema de diseño\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico (Label)\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/border-radius.md - Border radius\n *\n * @example\n * ```tsx\n * // Botón de producto normal\n * <POSProductButton\n * image=\"/images/parrilla.jpg\"\n * label=\"A la parrilla\"\n * onClick={() => console.log('Producto seleccionado')}\n * />\n *\n * // Botón de producto activo/seleccionado\n * <POSProductButton\n * image=\"/images/parrilla.jpg\"\n * label=\"A la parrilla\"\n * active={true}\n * />\n *\n * // Botón de producto deshabilitado\n * <POSProductButton\n * image=\"/images/parrilla.jpg\"\n * label=\"A la parrilla\"\n * disabled={true}\n * />\n * ```\n */\nexport const POSProductButton: React.FC<POSProductButtonProps> = ({\n image,\n label,\n active = false,\n disabled = false,\n onClick,\n className = '',\n ariaLabel,\n}) => {\n // ===== CLASES BASE =====\n const baseClasses = `\n flex\n flex-col\n gap-2\n p-3\n rounded-lg\n font-bold\n text-sm\n transition-all\n duration-150\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n `;\n\n // ===== CLASES DE ESTADO =====\n const stateClasses = disabled\n ? `\n bg-white\n text-content-primary\n opacity-55\n cursor-not-allowed\n pointer-events-none\n dark:bg-dark-bg-primary\n dark:text-dark-content-primary\n `\n : active\n ? `\n bg-primary-custom-100\n text-primary-custom-600\n cursor-pointer\n hover:bg-primary-custom-100\n active:scale-95\n dark:bg-primary-custom-100/20\n dark:text-primary-custom-600\n dark:hover:bg-primary-custom-100/30\n dark:active:scale-95\n `\n : `\n bg-white\n text-content-primary\n cursor-pointer\n hover:bg-background-secondary\n active:scale-95\n dark:bg-dark-bg-primary\n dark:text-dark-content-primary\n dark:hover:bg-dark-bg-primary/80\n dark:active:scale-95\n `;\n\n // ===== COMBINAR TODAS LAS CLASES =====\n const buttonClasses = [baseClasses, stateClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n return (\n <button\n type=\"button\"\n className={buttonClasses}\n disabled={disabled}\n onClick={onClick}\n aria-label={ariaLabel || label}\n aria-pressed={active}\n >\n {/* Imagen del producto */}\n <div className=\"aspect-158/80 w-full rounded-lg overflow-hidden\">\n <img\n src={image}\n alt={label}\n className=\"w-full h-full object-cover\"\n />\n </div>\n\n {/* Label del producto */}\n <div className=\"w-full text-left leading-5\">\n {label}\n </div>\n </button>\n );\n};\n","import React from 'react';\n\n/**\n * Icono Plus (heroicons-micro/plus)\n * Usado en el botón \"Agregar\" del POSProductCard\n * Tamaño: 16x16px según especificación de Figma\n */\nexport const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n aria-hidden=\"true\"\n >\n <path\n d=\"M8 3V13M3 8H13\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { POSProductCardProps } from './POSProductCard.types';\nimport { Button } from '../Button';\nimport { PlusIcon } from './icons';\n\n/**\n * Componente POSProductCard del sistema de diseño Siesa\n *\n * Card especializado para sistemas POS que muestra información de producto\n * con imagen, nombre, precio y botón de agregar. Diseñado para catálogos\n * de productos y selección rápida en punto de venta.\n *\n * **Estados disponibles:**\n * - `enabled`: Estado normal\n * - Light: fondo blanco (#ffffff), texto negro (#18181b)\n * - Dark: fondo oscuro (#18181b), texto claro (#f4f4f5)\n * - `active`: Estado seleccionado\n * - Light: fondo azul claro (#dbeefe), texto azul (#0e79fd)\n * - Dark: fondo azul oscuro (#112d57), texto celeste (#93d1fd)\n * - `disabled`: Estado deshabilitado con opacidad reducida\n *\n * **Características:**\n * - Imagen de producto con aspect ratio fijo y rounded-lg\n * - Nombre del producto con tipografía Label Small (14px Bold)\n * - Precio con tipografía Heading Small (24px Bold) y letter-spacing -2.5%\n * - Botón \"Agregar\" reutiliza el componente Button del sistema\n * - Soporte completo de dark mode pixel-perfect\n * - Transiciones suaves\n *\n * **Mejores prácticas implementadas:**\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Tokens de color consistentes con Figma\n * - Estados hover y active completos\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n * @see docs/shadows.md - Sistema de sombras\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336 - Diseño Figma\n *\n * @example\n * ```tsx\n * // Card de producto normal\n * <POSProductCard\n * image=\"/images/caprese.jpg\"\n * productName=\"Ensalada Caprese\"\n * price=\"$ 40.000\"\n * onAddClick={() => console.log('Producto agregado')}\n * />\n *\n * // Card de producto activo/seleccionado\n * <POSProductCard\n * image=\"/images/caprese.jpg\"\n * productName=\"Ensalada Caprese\"\n * price=\"$ 40.000\"\n * active={true}\n * />\n *\n * // Card de producto deshabilitado\n * <POSProductCard\n * image=\"/images/caprese.jpg\"\n * productName=\"Ensalada Caprese\"\n * price=\"$ 40.000\"\n * disabled={true}\n * />\n * ```\n */\nexport const POSProductCard: React.FC<POSProductCardProps> = ({\n image,\n productName,\n price,\n buttonText = 'Agregar',\n active = false,\n disabled = false,\n onAddClick,\n onCardClick,\n className = '',\n ariaLabel,\n}) => {\n // ===== CLASES BASE DEL CARD =====\n const baseClasses = `\n flex\n flex-col\n gap-2\n p-3\n rounded-lg\n w-[170px]\n transition-all\n duration-150\n focus:outline-hidden\n focus:ring-2\n focus:ring-primary-custom-400\n focus:ring-offset-2\n dark:focus:ring-dark-border-custom\n dark:focus:ring-offset-dark-bg-primary\n `;\n\n // ===== CLASES DE ESTADO DEL CARD =====\n // Light: enabled=#ffffff, active=#dbeefe\n // Dark: enabled=#18181b, active=#112d57\n const stateClasses = disabled\n ? `\n bg-white\n opacity-55\n cursor-not-allowed\n dark:bg-dark-bg-primary\n `\n : active\n ? `\n bg-primary-custom-100\n cursor-pointer\n dark:bg-dark-bg-custom\n `\n : `\n bg-white\n cursor-pointer\n dark:bg-dark-bg-primary\n `;\n\n // ===== CLASES DE TEXTO SEGÚN ESTADO =====\n // Light: enabled=#18181b, active=#0e79fd\n // Dark: enabled=#f4f4f5, active=#93d1fd\n const textClasses = disabled\n ? `\n text-content-primary\n dark:text-dark-content-primary\n `\n : active\n ? `\n text-primary-custom-600\n dark:text-dark-content-custom\n `\n : `\n text-content-primary\n dark:text-dark-content-primary\n `;\n\n // ===== COMBINAR CLASES DEL CARD =====\n const cardClasses = [baseClasses, stateClasses, className]\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== HANDLER DEL CLICK EN EL CARD =====\n const handleCardClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n // Solo propagar si no se hizo clic en el botón\n if ((event.target as HTMLElement).closest('button')) return;\n onCardClick?.(event);\n };\n\n // ===== HANDLER DEL CLICK EN EL BOTÓN =====\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n if (disabled) return;\n onAddClick?.(event);\n };\n\n return (\n <div\n className={cardClasses}\n onClick={handleCardClick}\n role=\"article\"\n aria-label={ariaLabel || `${productName} - ${price}`}\n tabIndex={disabled ? -1 : 0}\n >\n {/* Sección de información del producto */}\n <div className=\"flex flex-col gap-3 w-full\">\n {/* Imagen del producto */}\n <div className=\"h-[88px] w-full rounded-lg overflow-hidden\">\n <img\n src={image}\n alt={productName}\n className=\"w-full h-full object-cover\"\n />\n </div>\n\n {/* Datos del producto (nombre y precio) */}\n <div className={`flex flex-col w-full font-bold ${textClasses}`.trim().replace(/\\s+/g, ' ')}>\n {/* Nombre del producto - Label Small (14px) */}\n <div className=\"text-sm leading-5\">\n {productName}\n </div>\n\n {/* Precio - Heading Small (24px) con letter-spacing -2.5% (tracking-tighter) */}\n <div className=\"text-2xl leading-8 tracking-tighter\">\n {price}\n </div>\n </div>\n </div>\n\n {/* Botón Agregar - Reutiliza el componente Button del sistema */}\n <Button\n type=\"default\"\n size=\"sm\"\n leftIcon={<PlusIcon className=\"w-4 h-4\" />}\n onClick={handleButtonClick}\n disabled={disabled}\n fullWidth\n ariaLabel={`${buttonText} ${productName}`}\n >\n {buttonText}\n </Button>\n </div>\n );\n};\n","import React from 'react';\n\n/**\n * TrashIcon - Icono de papelera para eliminar items\n * Basado en Heroicons Micro (16x16px)\n */\nexport const TrashIcon: React.FC<{ className?: string }> = ({ className = '' }) => (\n <svg\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n","import React from 'react';\nimport type { POSProductSidebarItemsProps } from './POSProductSidebarItems.types';\nimport { Quantity } from '../Quantity/Quantity';\nimport { TrashIcon } from './icons';\n\n/**\n * POSProductSidebarItems - Componente de item de producto para sidebar POS\n *\n * Componente pixel-perfect basado en Figma (node 4507-28013) para mostrar\n * productos en el sidebar de un sistema POS con soporte completo para dark mode.\n *\n * **Características:**\n * - Badge de categoría con 19 colores configurables\n * - Referencia del producto (text-[10px]/leading-3)\n * - Precio total (text-xs/font-bold)\n * - Nombre del producto (text-xs/font-bold)\n * - Descripción con items opcionales (fondo terciario)\n * - Control de cantidad integrado (Quantity component)\n * - Botón de eliminar con color de error\n *\n * **Especificaciones de Figma:**\n * - Ancho base: 272px\n * - Spacing: gap-1 (4px) entre elementos del producto, gap-2 (8px) entre secciones\n * - Badge: rounded-md (6px), px-1.5, py-1, text-xs/leading-4\n * - Description section: bg-background-tertiary, p-2, rounded-lg\n * - Delete icon: 24x24px, color red-700\n *\n * **Dark Mode:**\n * Los colores se adaptan automáticamente en dark mode:\n * - Textos principales: text-content-primary → dark:text-dark-content-primary\n * - Description background: bg-background-tertiary → dark:bg-zinc-700\n * - Badge colores: Mantienen contraste en ambos modos\n * - Delete button: text-red-700 → dark:text-red-500\n *\n * **Orden de modificadores:** {responsive}:{dark}:{state}:{utility}\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013 - Diseño Figma\n *\n * @example\n * ```tsx\n * <POSProductSidebarItems\n * categoryLabel=\"Entradas\"\n * productRef=\"00147258369\"\n * price=\"$ 40,000.00\"\n * productName=\"Nombre producto\"\n * descriptionItems={[\n * { description: \"Papas limón mediana\", price: \"$ 40,000.00\" },\n * { description: \"Papas limón mediana\", price: \"$ 40,000.00\" },\n * ]}\n * quantity={0}\n * onQuantityChange={(qty) => console.log(qty)}\n * onDelete={() => console.log('Eliminar')}\n * />\n * ```\n */\nexport const POSProductSidebarItems: React.FC<POSProductSidebarItemsProps> = ({\n categoryLabel,\n categoryColor = 'lime',\n productRef,\n price,\n productName,\n descriptionItems = [],\n showDescription = true,\n quantity = 0,\n minQuantity = 0,\n maxQuantity,\n onQuantityChange,\n onDelete,\n disabled = false,\n className = '',\n deleteIcon,\n}) => {\n // ===== MAPA DE COLORES PARA BADGES =====\n // Basado en Figma node 4507-28432: bg lime-100 (#ecfccb) y text lime-700 (#4d7c0f)\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n const categoryColorClasses: Record<string, { bg: string; text: string }> = {\n lime: {\n bg: 'bg-lime-100 dark:bg-lime-900/40',\n text: 'text-lime-700 dark:text-lime-300'\n },\n red: {\n bg: 'bg-red-100 dark:bg-red-900/40',\n text: 'text-red-700 dark:text-red-300'\n },\n orange: {\n bg: 'bg-orange-100 dark:bg-orange-900/40',\n text: 'text-orange-700 dark:text-orange-300'\n },\n amber: {\n bg: 'bg-amber-100 dark:bg-amber-900/40',\n text: 'text-amber-700 dark:text-amber-300'\n },\n yellow: {\n bg: 'bg-yellow-100 dark:bg-yellow-900/40',\n text: 'text-yellow-700 dark:text-yellow-300'\n },\n green: {\n bg: 'bg-green-100 dark:bg-green-900/40',\n text: 'text-green-700 dark:text-green-300'\n },\n emerald: {\n bg: 'bg-emerald-100 dark:bg-emerald-900/40',\n text: 'text-emerald-700 dark:text-emerald-300'\n },\n teal: {\n bg: 'bg-teal-100 dark:bg-teal-900/40',\n text: 'text-teal-700 dark:text-teal-300'\n },\n cyan: {\n bg: 'bg-cyan-100 dark:bg-cyan-900/40',\n text: 'text-cyan-700 dark:text-cyan-300'\n },\n sky: {\n bg: 'bg-sky-100 dark:bg-sky-900/40',\n text: 'text-sky-700 dark:text-sky-300'\n },\n blue: {\n bg: 'bg-blue-100 dark:bg-blue-900/40',\n text: 'text-blue-700 dark:text-blue-300'\n },\n indigo: {\n bg: 'bg-indigo-100 dark:bg-indigo-900/40',\n text: 'text-indigo-700 dark:text-indigo-300'\n },\n violet: {\n bg: 'bg-violet-100 dark:bg-violet-900/40',\n text: 'text-violet-700 dark:text-violet-300'\n },\n purple: {\n bg: 'bg-purple-100 dark:bg-purple-900/40',\n text: 'text-purple-700 dark:text-purple-300'\n },\n fuchsia: {\n bg: 'bg-fuchsia-100 dark:bg-fuchsia-900/40',\n text: 'text-fuchsia-700 dark:text-fuchsia-300'\n },\n pink: {\n bg: 'bg-pink-100 dark:bg-pink-900/40',\n text: 'text-pink-700 dark:text-pink-300'\n },\n rose: {\n bg: 'bg-rose-100 dark:bg-rose-900/40',\n text: 'text-rose-700 dark:text-rose-300'\n },\n zinc: {\n bg: 'bg-zinc-100 dark:bg-zinc-800/50',\n text: 'text-zinc-600 dark:text-zinc-300'\n },\n primary: {\n bg: 'bg-primary-custom-100 dark:bg-primary-custom-600/30',\n text: 'text-primary-custom-600 dark:text-primary-custom-300'\n },\n };\n\n const colors = categoryColorClasses[categoryColor] || categoryColorClasses.lime;\n\n // Handler para cambio de cantidad\n const handleQuantityChange = (newQuantity: number) => {\n if (!disabled && onQuantityChange) {\n onQuantityChange(newQuantity);\n }\n };\n\n // Handler para eliminar\n const handleDelete = () => {\n if (!disabled && onDelete) {\n onDelete();\n }\n };\n\n return (\n <div\n className={`\n flex\n flex-col\n gap-2\n w-full\n ${disabled ? 'opacity-50 pointer-events-none' : ''}\n ${className}\n `.trim().replace(/\\s+/g, ' ')}\n data-component=\"POSProductSidebarItems\"\n >\n {/* ===== BODY SECTION ===== */}\n <div className=\"flex flex-col gap-2 w-full\">\n {/* ===== PRODUCT INFO ===== */}\n <div className=\"flex flex-col gap-1 w-full\">\n {/* Row: Badge + Ref + Price - Figma node 4507:28398 */}\n <div className=\"flex items-center gap-1 w-full\">\n {/* Col: Badge + Ref - Figma node 4507:28399 */}\n <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n {/* Category Badge - Figma node 4507:28432 */}\n <div\n className={`\n inline-flex\n items-center\n px-1.5\n py-1\n rounded-md\n transition-colors\n duration-150\n ${colors.bg}\n `.trim().replace(/\\s+/g, ' ')}\n >\n <span\n className={`\n text-xs\n leading-4\n font-normal\n text-center\n whitespace-nowrap\n ${colors.text}\n `.trim().replace(/\\s+/g, ' ')}\n >\n {categoryLabel}\n </span>\n </div>\n\n {/* Product Reference - Figma node 4507:28401 - Paragraph/XXSmall 10px */}\n <span className=\"text-[10px] leading-3 font-normal text-content-primary dark:text-dark-content-primary whitespace-nowrap\">\n {productRef}\n </span>\n </div>\n\n {/* Col: Price - Figma node 4507:28450 - Label/Tiny 12px Bold */}\n <div className=\"flex items-center shrink-0\">\n <span className=\"text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right\">\n {price}\n </span>\n </div>\n </div>\n\n {/* Row: Product Name - Figma node 4507:28404 - Label/Tiny 12px Bold */}\n <div className=\"flex items-start w-full\">\n <span className=\"text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary flex-1 min-w-0\">\n {productName}\n </span>\n </div>\n </div>\n\n {/* ===== DESCRIPTION SECTION ===== */}\n {/* Figma node 4507:28405 - Background tertiary con items de descripción */}\n {showDescription && descriptionItems.length > 0 && (\n <div\n className={`\n flex\n flex-col\n gap-2\n p-2\n rounded-lg\n bg-background-secondary\n dark:bg-zinc-700\n w-full\n transition-colors\n duration-150\n `.trim().replace(/\\s+/g, ' ')}\n >\n {descriptionItems.map((item, index) => (\n <div\n key={index}\n className=\"flex items-center gap-1 w-full\"\n >\n {/* Description text - Figma Body/Small 12px Regular */}\n <span className=\"flex-1 min-w-0 text-xs leading-3 font-normal text-content-primary dark:text-dark-content-primary\">\n {item.description}\n </span>\n {/* Price - Figma Body/Small Bold 12px */}\n <span className=\"text-xs leading-3 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right shrink-0\">\n {item.price}\n </span>\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/* ===== ACTIONS SECTION ===== */}\n {/* Figma node 4507:28412 - Quantity control + Delete button */}\n <div className=\"flex items-center justify-between w-full\">\n {/* Quantity Control - Figma width: 118px */}\n <div className=\"w-[118px]\">\n <Quantity\n value={quantity}\n min={minQuantity}\n max={maxQuantity}\n onChange={handleQuantityChange}\n disabled={disabled}\n />\n </div>\n\n {/* Delete Button - Figma node 4514:28258 - 24x24px, color red-700 (#b91c1c) */}\n <button\n type=\"button\"\n onClick={handleDelete}\n disabled={disabled}\n className={`\n flex\n items-center\n justify-center\n w-6\n h-6\n rounded-md\n text-red-700\n dark:text-red-500\n hover:text-red-800\n dark:hover:text-red-400\n hover:bg-red-50\n dark:hover:bg-red-900/20\n focus:outline-hidden\n focus:ring-2\n focus:ring-red-500/50\n dark:focus:ring-red-400/50\n focus:ring-offset-1\n focus:ring-offset-white\n dark:focus:ring-offset-dark-bg-primary\n active:scale-95\n transition-all\n duration-150\n ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}\n `.trim().replace(/\\s+/g, ' ')}\n aria-label=\"Eliminar producto\"\n >\n {deleteIcon || <TrashIcon className=\"w-[18px] h-[21px]\" />}\n </button>\n </div>\n </div>\n );\n};\n\nPOSProductSidebarItems.displayName = 'POSProductSidebarItems';\n","import React from 'react';\nimport type { POSTableProps } from './POSTable.types';\n\n/**\n * POSTable - Sistema de visualización de mesas de restaurante\n *\n * Componente para mostrar mesas de restaurante con diferentes estados\n * (disponible, ocupada, reservada) y configuraciones de sillas según diseño de Figma.\n *\n * ⚠️ IMPORTANTE - COLORES PERSONALIZADOS DEL CLIENTE:\n * Este componente usa colores específicos hardcodeados según el diseño del cliente.\n * Estos NO son tokens del sistema de diseño general, sino colores únicos para POSTable.\n * Esta es una EXCEPCIÓN JUSTIFICADA similar a los iconos personalizados de POSTable.\n *\n * ESPECIFICACIONES PIXEL-PERFECT DE FIGMA:\n *\n * Colores exactos (ESPECÍFICOS DEL CLIENTE):\n *\n * LIGHT MODE:\n * - Available (Azul): #0e79fd (border, mesa, silla, texto) - Azul primario del sistema\n * - Available Active: Bg #dbeefe + Border #bce4ff (cuando isActive=true)\n * - Busy (Naranja): #af460e (border, mesa, silla, texto)\n * - Busy Active: Bg #fed7aa + Border #fed7aa (cuando isActive=true)\n * - Reserved (Púrpura): #7e22ce (border, mesa, silla, texto)\n * - Reserved Active: Bg #e9d5ff + Border #e9d5ff (cuando isActive=true)\n *\n * DARK MODE (colores más brillantes para mejor visibilidad):\n * - Available (Azul claro): #93d1fd (border, mesa, silla, texto)\n * - Available Active: Bg #1e3a5f + Border #1e3a5f (cuando isActive=true)\n * - Busy (Naranja/Amarillo): #f5a927 (border, mesa, silla, texto)\n * - Busy Active: Bg #5c3a1e + Border #5c3a1e (cuando isActive=true)\n * - Reserved (Púrpura claro): #c084fc (border, mesa, silla, texto)\n * - Reserved Active: Bg #3b1f5c + Border #3b1f5c (cuando isActive=true)\n *\n * - Texto del label: Mismo color del estado (está FUERA de la mesa según Figma)\n *\n * Dimensiones exactas:\n * - Container: 160x160px, border-radius: 8px, border: 2px\n * - Inner container: 134x134px, gap: 4px\n * - Mesa Square: 64x64px, border-radius: 4px\n * - Mesa Circle: 64x64px, border-radius: 9999px\n * - Mesa Rectangle: 80x64px, border-radius: 4px\n * - Mesa Oval: 80x64px, border-radius: 24px\n * - Silla: 28x22px, border-radius: 4px\n * - Silla Respaldo (top): 28x16px (72.73% height)\n * - Silla Asiento (bottom): 24x14px (85.71% width, 63.64% height)\n * - Gap: 4px entre todos los elementos\n *\n * Tipografía:\n * - Label: 10px / 12px line-height, weight: 400, font: SiesaBT\n *\n * Mejores prácticas implementadas:\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\n * - Dark mode con estrategia 'class' (darkMode: 'class')\n * - Focus rings adaptativos para light y dark mode\n * - Valores exactos de Figma con notación [px]\n * - Type safety con TypeScript estricto\n * - Accesibilidad con ARIA labels\n *\n * @see docs/colors.md - Sistema de colores\n * @see docs/typography.md - Sistema tipográfico\n * @see docs/spacing.md - Sistema de espaciado\n *\n * @example\n * ```tsx\n * <POSTable\n * tableNumber=\"12\"\n * status=\"available\"\n * shape=\"square\"\n * chairs={4}\n * onClick={() => console.log('Mesa seleccionada')}\n * />\n * ```\n */\nexport const POSTable: React.FC<POSTableProps> = ({\n tableNumber,\n status = 'available',\n shape = 'square',\n chairs = 4,\n showChairs = true,\n isActive = false,\n onClick,\n className = '',\n disabled = false,\n children,\n}) => {\n // ===== COLORES POR ESTADO (VALORES EXACTOS DE FIGMA) =====\n // ⚠️ NOTA: Estos colores son ESPECÍFICOS del cliente (excepción justificada)\n // NO son tokens del sistema general de diseño\n // Light Mode: #0e79fd (azul primario), #af460e (naranja), #7e22ce (púrpura)\n // Dark Mode: #93d1fd (azul claro), #f5a927 (naranja/amarillo), #c084fc (púrpura claro)\n const statusColors = {\n available: {\n // Enabled state - Light: #0e79fd (azul primario del sistema), Dark: #93d1fd\n border: 'border-[#0e79fd]',\n borderDark: 'dark:border-[#93d1fd]',\n bgEnabled: 'bg-transparent',\n bgEnabledDark: 'dark:bg-transparent',\n // Actived state - Light: Bg #dbeefe + Border #bce4ff según Figma\n bgActive: 'bg-primary-custom-100',\n bgActiveDark: 'dark:bg-[#1e3a5f]',\n borderActive: 'border-[#bce4ff]',\n borderActiveDark: 'dark:border-[#1e3a5f]',\n // Table and chairs - Light: #0e79fd, Dark: #93d1fd\n table: 'bg-[#0e79fd]',\n tableDark: 'dark:bg-[#93d1fd]',\n chair: 'bg-[#0e79fd]',\n chairDark: 'dark:bg-[#93d1fd]',\n // Text (mismo color del estado - label está FUERA de la mesa según Figma)\n text: 'text-[#0e79fd]',\n textDark: 'dark:text-[#93d1fd]',\n // Focus ring\n focusRing: 'focus:ring-[#93d1fd]',\n focusRingDark: 'dark:focus:ring-[#0e79fd]',\n },\n busy: {\n // Enabled state - Light: #af460e, Dark: #f5a927\n border: 'border-[#af460e]',\n borderDark: 'dark:border-[#f5a927]',\n bgEnabled: 'bg-transparent',\n bgEnabledDark: 'dark:bg-transparent',\n // Actived state\n bgActive: 'bg-[#fed7aa]',\n bgActiveDark: 'dark:bg-[#5c3a1e]',\n borderActive: 'border-[#fed7aa]',\n borderActiveDark: 'dark:border-[#5c3a1e]',\n // Table and chairs - Light: #af460e, Dark: #f5a927\n table: 'bg-[#af460e]',\n tableDark: 'dark:bg-[#f5a927]',\n chair: 'bg-[#af460e]',\n chairDark: 'dark:bg-[#f5a927]',\n // Text (mismo color del estado - label está FUERA de la mesa según Figma)\n text: 'text-[#af460e]',\n textDark: 'dark:text-[#f5a927]',\n // Focus ring\n focusRing: 'focus:ring-[#f5a927]',\n focusRingDark: 'dark:focus:ring-[#af460e]',\n },\n reserved: {\n // Enabled state - Light: #7e22ce, Dark: #c084fc\n border: 'border-[#7e22ce]',\n borderDark: 'dark:border-[#c084fc]',\n bgEnabled: 'bg-transparent',\n bgEnabledDark: 'dark:bg-transparent',\n // Actived state\n bgActive: 'bg-[#e9d5ff]',\n bgActiveDark: 'dark:bg-[#3b1f5c]',\n borderActive: 'border-[#e9d5ff]',\n borderActiveDark: 'dark:border-[#3b1f5c]',\n // Table and chairs - Light: #7e22ce, Dark: #c084fc\n table: 'bg-[#7e22ce]',\n tableDark: 'dark:bg-[#c084fc]',\n chair: 'bg-[#7e22ce]',\n chairDark: 'dark:bg-[#c084fc]',\n // Text (mismo color del estado - label está FUERA de la mesa según Figma)\n text: 'text-[#7e22ce]',\n textDark: 'dark:text-[#c084fc]',\n // Focus ring\n focusRing: 'focus:ring-[#c084fc]',\n focusRingDark: 'dark:focus:ring-[#7e22ce]',\n },\n };\n\n // ===== CLASES DE FORMA (ESPECIFICACIONES EXACTAS DE FIGMA) =====\n const shapeClasses = {\n square: {\n container: 'rounded-[4px]',\n table: 'w-[64px] h-[64px] rounded-[4px]',\n },\n circle: {\n container: 'rounded-[9999px]',\n table: 'w-[64px] h-[64px] rounded-[9999px]',\n },\n rectangle: {\n container: 'rounded-[4px]',\n table: 'w-[80px] h-[64px] rounded-[4px]',\n },\n oval: {\n container: 'rounded-3xl',\n table: 'w-[80px] h-[64px] rounded-3xl',\n },\n };\n\n // ===== COMPONENTE SILLA (ESPECIFICACIONES EXACTAS DE FIGMA) =====\n const Chair: React.FC<{ rotation: number }> = ({ rotation }) => (\n <div\n className=\"w-[28px] h-[22px]\"\n style={{ transform: `rotate(${rotation}deg)` }}\n aria-hidden=\"true\"\n >\n {/* Respaldo (parte superior) - 72.73% height */}\n <div\n className={`\n absolute\n top-0\n left-0\n right-0\n h-[16px]\n rounded-t-[4px]\n ${statusColors[status].chair}\n ${statusColors[status].chairDark}\n `}\n />\n {/* Asiento (parte inferior) - 85.71% width, 63.64% height */}\n <div\n className={`\n absolute\n bottom-0\n left-[7.14%]\n right-[7.14%]\n h-[14px]\n rounded-b-[4px]\n ${statusColors[status].chair}\n ${statusColors[status].chairDark}\n `}\n />\n </div>\n );\n\n // ===== HANDLER DE CLICK =====\n const handleClick = () => {\n if (!disabled && onClick) {\n onClick();\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if ((e.key === 'Enter' || e.key === ' ') && !disabled && onClick) {\n e.preventDefault();\n onClick();\n }\n };\n\n // ===== CLASES DEL CONTAINER (160x160px según Figma) =====\n const containerClasses = [\n // Dimensiones exactas del container\n 'w-[160px]',\n 'h-[160px]',\n 'shrink-0',\n\n // Estructura\n 'relative',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'p-0',\n\n // Borde (2px según Figma)\n 'border-2',\n 'box-border',\n\n // Border radius (8px según Figma)\n 'rounded-[8px]',\n\n // Colores del borde y fondo según estado\n isActive ? statusColors[status].borderActive : statusColors[status].border,\n isActive ? statusColors[status].borderActiveDark : statusColors[status].borderDark,\n isActive ? statusColors[status].bgActive : statusColors[status].bgEnabled,\n isActive ? statusColors[status].bgActiveDark : statusColors[status].bgEnabledDark,\n\n // Focus rings adaptativos (siguiendo patrón de Button)\n 'focus:outline-hidden',\n 'focus:ring-2',\n statusColors[status].focusRing,\n statusColors[status].focusRingDark,\n 'focus:ring-offset-2',\n 'dark:focus:ring-offset-dark-bg-primary',\n\n // Transiciones\n 'transition-all',\n 'duration-150',\n\n // Interactividad\n onClick && !disabled ? 'cursor-pointer' : '',\n onClick && !disabled ? 'hover:scale-105' : '',\n onClick && !disabled ? 'active:scale-95' : '',\n disabled ? 'opacity-50 cursor-not-allowed' : '',\n\n // Clases adicionales\n className,\n ]\n .filter(Boolean)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n\n // ===== RENDER =====\n return (\n <button\n className={containerClasses}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n type=\"button\"\n aria-label={`Mesa ${tableNumber} - ${\n status === 'available' ? 'Disponible' : status === 'busy' ? 'Ocupada' : 'Reservada'\n }`}\n >\n {/* INNER CONTAINER (134x134px según Figma) */}\n <div className=\"flex flex-col gap-[4px] items-center justify-center w-[134px] h-[134px] shrink-0\">\n {/* FILA DE SILLAS SUPERIORES */}\n {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (\n <div className=\"flex gap-[4px] items-center justify-center shrink-0\">\n {chairs >= 6 && (\n <>\n <Chair rotation={0} />\n <Chair rotation={0} />\n </>\n )}\n {chairs === 2 && <Chair rotation={0} />}\n {chairs === 4 && <Chair rotation={0} />}\n </div>\n )}\n\n {/* FILA CENTRAL CON MESA Y SILLAS LATERALES */}\n <div className=\"flex gap-[4px] items-center justify-center shrink-0\">\n {/* COLUMNA IZQUIERDA - SILLAS */}\n {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (\n <div className=\"flex flex-col gap-[4px] items-start justify-center shrink-0\">\n {chairs >= 8 && (\n <>\n <Chair rotation={270} />\n <Chair rotation={270} />\n </>\n )}\n {(chairs === 4 || chairs === 6) && <Chair rotation={270} />}\n </div>\n )}\n\n {/* MESA (sin label - el label va fuera según Figma) */}\n <div className=\"flex flex-col gap-[4px] items-start justify-center shrink-0\">\n <div className=\"flex items-center shrink-0\">\n <div\n className={`\n ${shapeClasses[shape].table}\n ${statusColors[status].table}\n ${statusColors[status].tableDark}\n shrink-0\n `}\n />\n </div>\n </div>\n\n {/* COLUMNA DERECHA - SILLAS */}\n {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (\n <div className=\"flex flex-col gap-[4px] items-start justify-center shrink-0\">\n {chairs >= 8 && (\n <>\n <Chair rotation={90} />\n <Chair rotation={90} />\n </>\n )}\n {(chairs === 4 || chairs === 6) && <Chair rotation={90} />}\n </div>\n )}\n </div>\n\n {/* FILA DE SILLAS INFERIORES */}\n {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (\n <div className=\"flex gap-[4px] items-center justify-center shrink-0\">\n {chairs >= 6 && (\n <>\n <Chair rotation={180} />\n <Chair rotation={180} />\n </>\n )}\n {chairs === 2 && <Chair rotation={180} />}\n {chairs === 4 && <Chair rotation={180} />}\n </div>\n )}\n </div>\n\n {/* LABEL DE NÚMERO DE MESA - Debajo del conjunto mesa+sillas según Figma */}\n <div\n className={`\n flex\n flex-col\n justify-center\n leading-0\n not-italic\n text-ellipsis\n overflow-hidden\n min-w-full\n text-center\n whitespace-nowrap\n shrink-0\n text-[10px]\n font-normal\n ${statusColors[status].text}\n ${statusColors[status].textDark}\n `}\n >\n <p className=\"leading-[12px] text-ellipsis overflow-hidden\">\n Mesa {tableNumber}\n </p>\n {children}\n </div>\n </button>\n );\n};\n","import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type Theme = 'light' | 'dark';\n\ninterface ThemeContextType {\n theme: Theme;\n toggleTheme: () => void;\n setTheme: (theme: Theme) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: React.ReactNode;\n defaultTheme?: Theme;\n}\n\n/**\n * ThemeProvider - Proveedor de contexto para el tema de la aplicación\n *\n * Maneja el estado del tema (light/dark) y lo persiste en localStorage.\n * Aplica la clase 'dark' al elemento HTML root cuando el tema es dark.\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"light\">\n * <App />\n * </ThemeProvider>\n * ```\n */\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n defaultTheme = 'light'\n}) => {\n const [theme, setThemeState] = useState<Theme>(() => {\n // Intenta obtener el tema del localStorage\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('siesa-ui-theme') as Theme;\n return savedTheme || defaultTheme;\n }\n return defaultTheme;\n });\n\n useEffect(() => {\n // Aplica o remueve la clase 'dark' del elemento root\n const root = window.document.documentElement;\n\n if (theme === 'dark') {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n\n // Guarda el tema en localStorage\n localStorage.setItem('siesa-ui-theme', theme);\n }, [theme]);\n\n const toggleTheme = () => {\n setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));\n };\n\n const setTheme = (newTheme: Theme) => {\n setThemeState(newTheme);\n };\n\n return (\n <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>\n {children}\n </ThemeContext.Provider>\n );\n};\n\n/**\n * useTheme - Hook para acceder al contexto del tema\n *\n * @returns {ThemeContextType} Objeto con el tema actual y funciones para modificarlo\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const { theme, toggleTheme } = useTheme();\n *\n * return (\n * <button onClick={toggleTheme}>\n * Tema actual: {theme}\n * </button>\n * );\n * }\n * ```\n */\nexport const useTheme = (): ThemeContextType => {\n const context = useContext(ThemeContext);\n\n if (context === undefined) {\n throw new Error('useTheme debe ser usado dentro de un ThemeProvider');\n }\n\n return context;\n};\n"],"names":["Button","type","size","iconOnly","leftIcon","rightIcon","children","disabled","className","onClick","htmlType","fullWidth","ariaLabel","badge","badgeCount","badgeColor","rest","sizeClasses","iconSizeClasses","textSizeClasses","typeClasses","baseClasses","widthClass","buttonClasses","renderIcon","icon","jsx","renderContent","jsxs","Fragment","badgeColorClasses","badgeColors","renderBadge","Input","forwardRef","label","labelSecondary","helperText","error","errorMessage","id","props","ref","inputId","baseInputClasses","interactiveClasses","errorClasses","containerClasses","existingClassName","cloneElement","Textarea","description","resize","rows","textareaId","baseTextareaClasses","resizeClasses","Checkbox","checked","indeterminate","onChange","inputRef","useRef","combinedRef","checkboxId","useEffect","checkboxClasses","Radio","value","name","radioId","baseRadioClasses","checkedClasses","Switch","labelPosition","switchId","baseTrackClasses","getTrackStateClasses","getButtonClasses","baseButtonClasses","positionClass","trackClasses","LabelContent","SwitchInput","Avatar","src","alt","initials","containerSizeClasses","Divider","finalClasses","DescriptionList","term","details","columnClasses","Alert","title","actions","onCancel","onConfirm","cancelText","confirmText","actionButtons","Badge","color","count","colors","Quantity","controlledValue","defaultValue","min","max","linkText","onLinkClick","internalValue","setInternalValue","useState","isControlled","currentValue","handleValueChange","newValue","clampedValue","handleDecrement","handleIncrement","isDecrementDisabled","isIncrementDisabled","MinusIcon","PlusIcon","borderClass","hoverClass","focusClass","ChevronDownIcon","Dropdown","variant","items","controlledOpen","onOpenChange","menuClassName","placeholder","internalOpen","setInternalOpen","menuPosition","setMenuPosition","dropdownRef","menuRef","isOpen","calculateMenuPosition","useCallback","triggerRect","viewportWidth","viewportHeight","menuWidth","menuHeight","spaceBelow","spaceAbove","spaceRight","spaceLeft","openAbove","openLeft","handleToggle","newOpen","handleClickOutside","event","handleEscape","handleItemClick","item","triggerClasses","menuClasses","index","DropdownDivider","DropdownHeading","DropdownItem","shortcut","selected","itemClasses","headingClasses","dividerClasses","Notification","colorClasses","dynamicAriaLabel","displayCount","ArrowLeftIcon","ArrowRightIcon","Pagination","currentPage","totalPages","onPageChange","backText","nextText","siblingCount","showBackButton","showNextButton","paginationRange","useMemo","totalBlocks","_","i","leftSiblingIndex","rightSiblingIndex","shouldShowLeftDots","shouldShowRightDots","firstPageIndex","lastPageIndex","leftItemCount","rightItemCount","rightRange","middleRange","handlePageChange","page","PageButton","isActive","buttonAriaLabel","isDots","ChevronUpDownIcon","CheckIcon","Select","options","showLabel","showDescription","menuHeader","triggerClassName","required","setIsOpen","selectedValue","setSelectedValue","focusedIndex","setFocusedIndex","containerRef","triggerRef","handleKeyDown","prev","handleSelect","selectedOption","opt","toggleMenu","option","finalTriggerClasses","finalMenuClasses","baseMenuItemClasses","getMenuItemClasses","isSelected","isFocused","hoverClasses","disabledClasses","iconClasses","checkIconClasses","ChevronUpIcon","TableHeader","column","sortable","sorted","sortDirection","onSort","combinedClasses","e","TableCell","align","width","isStriped","rowIndex","alignClasses","stripedBg","previousLabel","nextLabel","pageNumbers","pages","Table","columns","data","showBorder","showShadow","externalSortColumn","externalSortDirection","emptyMessage","loading","loadingRows","pagination","internalSortColumn","setInternalSortColumn","internalSortDirection","setInternalSortDirection","sortColumn","handleSort","columnAccessor","newDirection","getCellValue","row","accessor","colIndex","content","Tab","active","contentBaseClasses","contentStateClasses","textClasses","badgeClasses","indicatorClasses","contentFinalClasses","Tabs","activeId","defaultActiveId","internalActiveId","setInternalActiveId","currentActiveId","handleTabClick","itemWidthClass","ShoppingCartIcon","BellIcon","MagnifyingGlassIcon","ExclamationTriangleIcon","ArrowLeftStartOnRectangleIcon","Navbar","logo","productName","environmentBadge","userDropdown","notifications","hideActionButtons","leadingAction","siesaLogo","showBusinessLogo","showSiesaLogoLeading","showSiesaLogoTrailing","onNavigationClick","onSearchClick","onCartClick","onNotificationsClick","actionButtonClasses","navigationButtonClasses","isMobile","isDesktop","isTablet","isResponsive","NavigationButton","buttonContent","BusinessLogo","logoContent","SiesaLogoLeading","logoFull","logoMobile","SiesaLogoTrailing","responsive","dividerContent","ProductName","nameContent","EnvironmentBadge","SearchButton","CartButton","NotificationsButton","UserDropdown","dropdownButtonClasses","renderFullDropdown","NavigationBar","activeItemId","onItemClick","renderItem","itemContainerClasses","iconContainerClasses","labelClasses","destinationsClasses","ConventionIcon","lightColor","darkColor","POSConvention","status","config","XMarkIcon","CalendarIcon","NoSymbolIcon","UsersIcon","POSLocationButton","locationName","state","capacity","StatusIcon","backgroundClasses","capacityText","POSNumberButton","border","POSProductButton","image","POSProductCard","price","buttonText","onAddClick","onCardClick","stateClasses","cardClasses","handleCardClick","handleButtonClick","TrashIcon","POSProductSidebarItems","categoryLabel","categoryColor","productRef","descriptionItems","quantity","minQuantity","maxQuantity","onQuantityChange","onDelete","deleteIcon","categoryColorClasses","handleQuantityChange","newQuantity","handleDelete","POSTable","tableNumber","shape","chairs","showChairs","statusColors","shapeClasses","Chair","rotation","handleClick","ThemeContext","createContext","ThemeProvider","defaultTheme","theme","setThemeState","root","toggleTheme","setTheme","newTheme","useTheme","context","useContext"],"mappings":"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"}