npm - siesa-ui-kit - Versions diffs - 1.0.6 → 1.0.7 - Mend

siesa-ui-kit 1.0.6 → 1.0.7

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 (296) hide show

package/dist/index.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.cjs","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/context/ThemeContext.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { ButtonProps } from './Button.types';\r\n\r\n/**\r\n * Componente Button del sistema de diseño Siesa\r\n *\r\n * Implementación pixel-perfect basada en Figma (node 4001-17240)\r\n * con soporte completo para todos los estados, tamaños y variantes.\r\n *\r\n * **Variantes (type):**\r\n * - `default`: Botón primario con fondo sólido (#0e79fd) y borde (#3c9bf6)\r\n * - Sombra interna para efecto de profundidad\r\n * - Usar para acciones principales (Guardar, Enviar, Confirmar)\r\n * - `outline`: Botón secundario con borde (#93d1fd) y shadow-sm\r\n * - Usar para acciones secundarias (Cancelar, Volver)\r\n * - `plain`: Botón terciario sin borde visible\r\n * - Hover overlay sutil\r\n * - Usar para acciones sutiles (Cerrar, Ver más, Links)\r\n *\r\n * **Tamaños (size):**\r\n * - `xs` (24px): Espacios muy compactos, inline actions. Padding: 8px h, 4px v\r\n * - `sm` (28px): Barras de herramientas, acciones secundarias. Padding: 8px h, 4px v\r\n * - `base` (32px): Tamaño estándar para la mayoría de casos. Padding: 10px h, 6px v\r\n * - `l` (36px): Botones destacados, CTAs. Padding: 12px h, 8px v\r\n * - `xl` (40px): Heroes, landing pages. Padding: 16px h, 8px v\r\n *\r\n * **Estados:**\r\n * - `default`: Estado normal con colores base\r\n * - `hover`: Overlay visual sutil (bg-primary-custom-500 para default)\r\n * - `focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)\r\n * - `active`: Scale animation (scale-95) para feedback táctil\r\n * - `disabled`: Opacity 50% con pointer-events-none\r\n *\r\n * **Badges de notificación:**\r\n * - `badge`: Muestra un dot de notificación en la esquina superior derecha\r\n * - `badgeCount`: Muestra un badge con número (99+ para >99)\r\n * - `badgeColor`: Color del badge (por defecto: red - #b91c1c)\r\n *\r\n * **Especificaciones de Figma:**\r\n * - Border radius: 6px (rounded-md)\r\n * - Tipografía: Label Small (14px Bold) para sm/base/l/xl, Label Tiny (12px Bold) para xs\r\n * - Iconos: 16x16px en todos los tamaños\r\n * - Gap entre elementos: 8px (xs/sm/base), 12px (l/xl)\r\n *\r\n * **Dark Mode:**\r\n * Los botones invierten colores en dark mode:\r\n * - Default: fondo celeste claro (#bfe2fe), texto azul (#0e79fd), borde celeste (#93d1fd)\r\n * - Outline: texto celeste (#93d1fd), borde azul (#0f6ae3)\r\n * - Plain: texto celeste (#93d1fd), hover overlay blanco 20%\r\n * - Focus ring adaptativo con offset oscuro\r\n *\r\n * @see docs/colors.md - Sistema de colores\r\n * @see docs/shadows.md - Sistema de sombras (shadow-button-inset, shadow-sm)\r\n * @see docs/typography.md - Sistema tipográfico (Label Small/Tiny)\r\n * @see docs/spacing.md - Sistema de espaciado\r\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240 - Diseño Figma\r\n *\r\n * @example\r\n * ```tsx\r\n * // Botón primario con icono\r\n * <Button type=\"default\" size=\"base\" leftIcon={<SaveIcon />}>\r\n * Guardar\r\n * </Button>\r\n *\r\n * // Botón secundario\r\n * <Button type=\"outline\" size=\"base\">\r\n * Cancelar\r\n * </Button>\r\n *\r\n * // Botón solo icono para barra de herramientas\r\n * <Button type=\"plain\" size=\"sm\" iconOnly leftIcon={<CloseIcon />} ariaLabel=\"Cerrar\" />\r\n *\r\n * // Botón con badge de notificación (dot)\r\n * <Button type=\"default\" size=\"base\" badge>\r\n * Notificaciones\r\n * </Button>\r\n *\r\n * // Botón con badge contador\r\n * <Button type=\"default\" size=\"base\" badgeCount={5} badgeColor=\"red\">\r\n * Mensajes\r\n * </Button>\r\n * ```\r\n */\r\nexport const Button: React.FC<ButtonProps> = ({\r\n type = 'default',\r\n size = 'base',\r\n iconOnly = false,\r\n leftIcon,\r\n rightIcon,\r\n children,\r\n disabled = false,\r\n className = '',\r\n onClick,\r\n htmlType = 'button',\r\n fullWidth = false,\r\n ariaLabel,\r\n badge = false,\r\n badgeCount,\r\n badgeColor = 'red',\r\n ...rest\r\n}) => {\r\n // ===== CLASES DE TAMAÑO =====\r\n const sizeClasses = {\r\n xs: iconOnly ? 'h-6 w-6 p-1' : 'h-6 py-1 px-2 gap-2',\r\n sm: iconOnly ? 'h-7 w-7 p-1.5' : 'h-7 py-1 px-2 gap-2',\r\n base: iconOnly ? 'h-8 w-8 p-2' : 'h-8 py-1.5 px-2.5 gap-2',\r\n l: iconOnly ? 'h-9 w-9 p-2.5' : 'h-9 py-2 px-3 gap-3',\r\n xl: iconOnly ? 'h-10 w-10 p-3' : 'h-10 py-2 px-4 gap-3',\r\n };\r\n\r\n // ===== CLASES DE TAMAÑO DE ICONO =====\r\n const iconSizeClasses = {\r\n xs: 'w-4 h-4',\r\n sm: 'w-4 h-4',\r\n base: 'w-4 h-4',\r\n l: 'w-4 h-4',\r\n xl: 'w-4 h-4',\r\n };\r\n\r\n // ===== CLASES DE TAMAÑO DE TEXTO =====\r\n // Usando el sistema de tipografía Label del design system (typography.md)\r\n const textSizeClasses = {\r\n xs: 'text-xs', // Label Tiny - 12px\r\n sm: 'text-sm', // Label Small - 14px\r\n base: 'text-sm', // Label Small - 14px (default para base)\r\n l: 'text-sm', // Label Small - 14px (corregido según Figma)\r\n xl: 'text-sm', // Label Small - 14px (corregido según Figma)\r\n };\r\n\r\n // ===== CLASES DE TIPO (Default, Outline, Plain) =====\r\n // Especificaciones de Figma node 4001-17240\r\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n // Dark mode: Los botones invierten colores (fondo claro, texto oscuro)\r\n // - Light: fondo #0e79fd (azul), texto #eff8ff (blanco)\r\n // - Dark: fondo #bfe2fe (celeste claro), texto #0e79fd (azul)\r\n const typeClasses = {\r\n default: `\r\n bg-primary-custom-600\r\n text-primary-inverse-content\r\n border\r\n border-primary-inverse-border\r\n shadow-button-inset\r\n hover:bg-primary-custom-500\r\n active:scale-95\r\n transition-all\r\n duration-150\r\n dark:bg-dark-bg-inverse\r\n dark:text-dark-content-inverse\r\n dark:border-dark-border-inverse\r\n dark:hover:bg-dark-bg-inverse/90\r\n `,\r\n outline: `\r\n bg-transparent\r\n text-primary-custom-600\r\n border\r\n border-primary-custom-300\r\n shadow-sm\r\n hover:bg-primary-custom-100\r\n active:scale-95\r\n transition-all\r\n duration-150\r\n dark:text-dark-content-custom\r\n dark:border-dark-border-custom\r\n dark:hover:bg-dark-bg-custom/20\r\n `,\r\n plain: `\r\n bg-transparent\r\n text-primary-custom-600\r\n border\r\n border-transparent\r\n hover:bg-hover-overlay\r\n active:scale-95\r\n transition-all\r\n duration-150\r\n dark:text-dark-content-custom\r\n dark:hover:bg-hover-overlay-dark\r\n `,\r\n };\r\n\r\n // ===== CLASES BASE =====\r\n // Especificaciones de Figma: Focus ring = 4px spread primary-custom-400 + 2px offset primary-custom-100\r\n // Dark mode: Focus ring adaptativo con offset oscuro\r\n const baseClasses = `\r\n inline-flex\r\n items-center\r\n justify-center\r\n rounded-md\r\n font-bold\r\n whitespace-nowrap\r\n focus:outline-none\r\n focus:ring-4\r\n focus:ring-primary-custom-400\r\n focus:ring-offset-2\r\n focus:ring-offset-primary-custom-100\r\n dark:focus:ring-dark-border-custom\r\n dark:focus:ring-offset-dark-bg-primary\r\n disabled:opacity-50\r\n disabled:cursor-not-allowed\r\n disabled:pointer-events-none\r\n `;\r\n\r\n // ===== CLASE FULL WIDTH =====\r\n const widthClass = fullWidth ? 'w-full' : '';\r\n\r\n // ===== COMBINAR TODAS LAS CLASES =====\r\n const buttonClasses = [\r\n baseClasses,\r\n sizeClasses[size],\r\n typeClasses[type],\r\n widthClass,\r\n className,\r\n ]\r\n .join(' ')\r\n .replace(/\\s+/g, ' ')\r\n .trim();\r\n\r\n // ===== RENDERIZAR ICONO =====\r\n const renderIcon = (icon: React.ReactNode) => {\r\n if (!icon) return null;\r\n return (\r\n <span className={`inline-flex items-center justify-center ${iconSizeClasses[size]}`}>\r\n {icon}\r\n </span>\r\n );\r\n };\r\n\r\n // ===== RENDERIZAR CONTENIDO =====\r\n const renderContent = () => {\r\n // Si es iconOnly, solo mostrar leftIcon\r\n if (iconOnly) {\r\n return renderIcon(leftIcon);\r\n }\r\n\r\n // Si tiene texto y/o iconos\r\n return (\r\n <>\r\n {leftIcon && renderIcon(leftIcon)}\r\n {children && <span className={textSizeClasses[size]}>{children}</span>}\r\n {rightIcon && renderIcon(rightIcon)}\r\n </>\r\n );\r\n };\r\n\r\n // ===== MAPA DE COLORES DE BADGE =====\r\n // Basado en el componente Badge existente\r\n const badgeColorClasses: Record<string, { bg: string; text: string }> = {\r\n zinc: { bg: 'bg-zinc-600', text: 'text-white' },\r\n red: { bg: 'bg-red-700', text: 'text-white' },\r\n orange: { bg: 'bg-orange-700', text: 'text-white' },\r\n amber: { bg: 'bg-amber-700', text: 'text-white' },\r\n yellow: { bg: 'bg-yellow-700', text: 'text-white' },\r\n lime: { bg: 'bg-lime-700', text: 'text-white' },\r\n green: { bg: 'bg-green-700', text: 'text-white' },\r\n emerald: { bg: 'bg-emerald-700', text: 'text-white' },\r\n teal: { bg: 'bg-teal-700', text: 'text-white' },\r\n cyan: { bg: 'bg-cyan-700', text: 'text-white' },\r\n sky: { bg: 'bg-sky-700', text: 'text-white' },\r\n blue: { bg: 'bg-blue-700', text: 'text-white' },\r\n indigo: { bg: 'bg-indigo-700', text: 'text-white' },\r\n violet: { bg: 'bg-violet-700', text: 'text-white' },\r\n purple: { bg: 'bg-purple-700', text: 'text-white' },\r\n fuchsia: { bg: 'bg-fuchsia-700', text: 'text-white' },\r\n pink: { bg: 'bg-pink-700', text: 'text-white' },\r\n rose: { bg: 'bg-rose-700', text: 'text-white' },\r\n primary: { bg: 'bg-primary-custom-600', text: 'text-white' },\r\n secondary: { bg: 'bg-zinc-600', text: 'text-white' },\r\n tertiary: { bg: 'bg-zinc-600', text: 'text-white' },\r\n };\r\n\r\n const badgeColors = badgeColorClasses[badgeColor] || badgeColorClasses.red;\r\n\r\n // ===== RENDERIZAR BADGE =====\r\n const renderBadge = () => {\r\n // Si no hay badge ni badgeCount, no renderizar nada\r\n if (!badge && badgeCount === undefined) return null;\r\n\r\n // Si hay badgeCount, renderizar badge con número\r\n if (badgeCount !== undefined) {\r\n return (\r\n <span\r\n className={`\r\n absolute\r\n -top-1\r\n -right-1\r\n flex\r\n items-center\r\n justify-center\r\n min-w-[16px]\r\n h-4\r\n px-1\r\n rounded-full\r\n text-[10px]\r\n font-bold\r\n leading-none\r\n ${badgeColors.bg}\r\n ${badgeColors.text}\r\n pointer-events-none\r\n `.trim().replace(/\\s+/g, ' ')}\r\n aria-label={`${badgeCount} notificaciones`}\r\n >\r\n {badgeCount > 99 ? '99+' : badgeCount}\r\n </span>\r\n );\r\n }\r\n\r\n // Si solo hay badge (sin número), renderizar dot\r\n return (\r\n <span\r\n className={`\r\n absolute\r\n -top-1\r\n -right-1\r\n w-2\r\n h-2\r\n rounded-full\r\n ${badgeColors.bg}\r\n pointer-events-none\r\n `.trim().replace(/\\s+/g, ' ')}\r\n aria-label=\"Notificación\"\r\n />\r\n );\r\n };\r\n\r\n return (\r\n <button\r\n type={htmlType}\r\n className={`${buttonClasses} ${(badge || badgeCount !== undefined) ? 'relative' : ''}`}\r\n disabled={disabled}\r\n onClick={onClick}\r\n aria-label={ariaLabel}\r\n {...rest}\r\n >\r\n {renderContent()}\r\n {renderBadge()}\r\n </button>\r\n );\r\n};\r\n","import React, { forwardRef, cloneElement } from 'react';\r\nimport type { InputProps } from './Input.types';\r\n\r\n/**\r\n * Input - Componente de campo de entrada del sistema de diseño Siesa\r\n * Basado en especificaciones de Figma con Tailwind CSS\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n * - Dark mode con estrategia 'class' (darkMode: 'class')\r\n * - Focus rings adaptativos para light y dark mode\r\n * - Tokens de color consistentes con la documentación\r\n * - Sombra base para inputs con focus\r\n * - Estados hover, focus, disabled y error completos\r\n * - Typography: Paragraph Regular para texto, Label Bold para labels\r\n *\r\n * Campo de entrada de texto con soporte para:\r\n * - Estados: default, hover, focus, filled, disabled\r\n * - Validación con mensajes de error\r\n * - Iconos izquierdo y derecho\r\n * - Label y helper text\r\n * - Dark mode completo\r\n * - Accesibilidad completa\r\n *\r\n * @see docs/colors.md - Sistema de colores\r\n * @see docs/shadows.md - Sistema de sombras\r\n * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)\r\n * @see docs/spacing.md - Sistema de espaciado\r\n *\r\n * @example\r\n * ```tsx\r\n * <Input\r\n * label=\"Email\"\r\n * placeholder=\"tu@email.com\"\r\n * leftIcon={<EnvelopeIcon />}\r\n * helperText=\"Ingresa tu correo electrónico\"\r\n * />\r\n * ```\r\n */\r\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\r\n (\r\n {\r\n label,\r\n labelSecondary,\r\n helperText,\r\n error = false,\r\n errorMessage,\r\n leftIcon,\r\n rightIcon,\r\n fullWidth = false,\r\n className = '',\r\n disabled = false,\r\n id,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Generar ID único si no se proporciona\r\n const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n // ===== CLASES BASE DEL INPUT =====\r\n // Usando el sistema tipográfico Paragraph Regular (14px = text-sm)\r\n // Border radius rounded-md (6px) consistente con Button\r\n const baseInputClasses = `\r\n w-full\r\n px-3\r\n py-1.5\r\n text-sm\r\n leading-6\r\n font-normal\r\n text-content-primary\r\n bg-bg-primary\r\n border\r\n border-border-primary\r\n rounded-md\r\n outline-none\r\n transition-all\r\n duration-150\r\n placeholder:text-content-tertiary\r\n dark:bg-dark-bg-primary\r\n dark:border-dark-border-primary\r\n dark:text-dark-content-primary\r\n dark:placeholder:text-dark-content-tertiary\r\n `;\r\n\r\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\r\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n // Focus rings adaptativos siguiendo el patrón de Button\r\n const interactiveClasses = !disabled\r\n ? `\r\n hover:border-primary-custom-600\r\n focus:border-primary-custom-600\r\n focus:ring-2\r\n focus:ring-primary-custom-400\r\n focus:ring-offset-2\r\n dark:hover:border-dark-border-custom\r\n dark:focus:border-dark-border-custom\r\n dark:focus:ring-dark-border-custom\r\n dark:focus:ring-offset-dark-bg-primary\r\n `\r\n : `\r\n opacity-50\r\n cursor-not-allowed\r\n bg-bg-secondary\r\n dark:bg-dark-bg-secondary\r\n `;\r\n\r\n // ===== CLASES PARA ESTADO DE ERROR =====\r\n // Los colores de error son los mismos en light y dark mode\r\n const errorClasses = error\r\n ? `\r\n !border-error-border\r\n focus:!ring-error-border/30\r\n focus:!ring-offset-2\r\n dark:!border-error-border\r\n dark:focus:!ring-error-border/30\r\n dark:focus:!ring-offset-dark-bg-primary\r\n `\r\n : '';\r\n\r\n // ===== CLASES DEL CONTENEDOR =====\r\n const containerClasses = fullWidth ? 'w-full' : 'w-[265px]';\r\n\r\n // ===== RENDERIZAR ICONOS =====\r\n // Clonar iconos con estilos apropiados y dark mode completo\r\n const renderIcon = (icon: React.ReactElement | undefined) => {\r\n if (!icon) return null;\r\n const existingClassName = (icon.props as any).className || '';\r\n return cloneElement(icon as React.ReactElement<any>, {\r\n className: `w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary ${existingClassName}`,\r\n });\r\n };\r\n\r\n return (\r\n <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>\r\n {/* Label */}\r\n {label && (\r\n <label\r\n htmlFor={inputId}\r\n className=\"flex items-center w-full font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary\"\r\n >\r\n <span className=\"flex-1\">{label}</span>\r\n {labelSecondary && (\r\n <span className=\"text-xs leading-4 text-primary-custom-600 dark:text-primary-custom-600\">\r\n {labelSecondary}\r\n </span>\r\n )}\r\n </label>\r\n )}\r\n\r\n {/* Input Container */}\r\n <div className=\"relative flex items-center\">\r\n {/* Left Icon */}\r\n {leftIcon && (\r\n <div className=\"absolute left-3 pointer-events-none\">\r\n {renderIcon(leftIcon)}\r\n </div>\r\n )}\r\n\r\n {/* Input Field */}\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n disabled={disabled}\r\n className={`\r\n ${baseInputClasses}\r\n ${interactiveClasses}\r\n ${errorClasses}\r\n ${leftIcon ? 'pl-9' : ''}\r\n ${rightIcon ? 'pr-9' : ''}\r\n `.trim().replace(/\\s+/g, ' ')}\r\n {...props}\r\n />\r\n\r\n {/* Right Icon */}\r\n {rightIcon && (\r\n <div className=\"absolute right-3 pointer-events-none\">\r\n {renderIcon(rightIcon)}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Helper Text or Error Message */}\r\n {(helperText || errorMessage) && (\r\n <p\r\n className={`\r\n text-xs\r\n leading-5\r\n ${\r\n error\r\n ? 'text-error-content dark:text-error-content'\r\n : 'text-content-tertiary dark:text-dark-content-tertiary'\r\n }\r\n `.trim().replace(/\\s+/g, ' ')}\r\n >\r\n {error && errorMessage ? errorMessage : helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nInput.displayName = 'Input';\r\n","import { forwardRef } from 'react';\r\nimport type { TextareaProps } from './Textarea.types';\r\n\r\n/**\r\n * Textarea - Componente de área de texto del sistema de diseño Siesa\r\n * Basado en especificaciones de Figma con Tailwind CSS\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n * - Dark mode con estrategia 'class' (darkMode: 'class')\r\n * - Focus rings adaptativos para light y dark mode\r\n * - Tokens de color consistentes con la documentación\r\n * - Estados hover, focus, disabled y error completos\r\n * - Typography: Paragraph Base (16px) para texto\r\n *\r\n * Campo de entrada de texto multi-línea con soporte para:\r\n * - Estados: default, hover, focus, filled, disabled\r\n * - Validación con mensajes de error\r\n * - Label, description y helper text\r\n * - Resize vertical, horizontal, both o none\r\n * - Dark mode completo\r\n * - Accesibilidad completa\r\n *\r\n * @see docs/colors.md - Sistema de colores\r\n * @see docs/shadows.md - Sistema de sombras\r\n * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)\r\n * @see docs/spacing.md - Sistema de espaciado\r\n *\r\n * @example\r\n * ```tsx\r\n * <Textarea\r\n * label=\"About\"\r\n * description=\"Tell us about yourself\"\r\n * placeholder=\"Write a few sentences...\"\r\n * helperText=\"Minimum 50 characters\"\r\n * />\r\n * ```\r\n */\r\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n (\r\n {\r\n label,\r\n description,\r\n helperText,\r\n error = false,\r\n errorMessage,\r\n fullWidth = false,\r\n resize = 'vertical',\r\n className = '',\r\n disabled = false,\r\n id,\r\n rows = 4,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Generar ID único si no se proporciona\r\n const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n // ===== CLASES BASE DEL TEXTAREA =====\r\n // Usando el sistema tipográfico Paragraph Base (16px = text-base)\r\n // Border radius rounded-lg (8px) según especificaciones de Figma\r\n // Padding: px-3 (12px) izquierda, pr-1.5 (6px) derecha para el indicador de resize\r\n const baseTextareaClasses = `\r\n w-full\r\n px-3\r\n pr-1.5\r\n py-1.5\r\n text-base\r\n leading-6\r\n font-normal\r\n bg-bg-primary\r\n border\r\n border-border-primary\r\n rounded-lg\r\n outline-none\r\n transition-all\r\n duration-150\r\n placeholder:text-content-tertiary\r\n dark:bg-dark-bg-primary\r\n dark:border-dark-border-primary\r\n dark:text-dark-content-primary\r\n dark:placeholder:text-dark-content-tertiary\r\n `;\r\n\r\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\r\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n // Hover: borde más opaco (zinc-400) según especificaciones de Figma\r\n // Focus: solo border-2 sin ring, según especificaciones de Figma\r\n const interactiveClasses = !disabled\r\n ? `\r\n hover:border-zinc-400\r\n focus:border-2\r\n focus:border-primary-custom-600\r\n dark:hover:border-zinc-500\r\n dark:focus:border-2\r\n dark:focus:border-dark-border-custom\r\n `\r\n : `\r\n opacity-50\r\n cursor-not-allowed\r\n bg-bg-secondary\r\n dark:bg-dark-bg-secondary\r\n `;\r\n\r\n // ===== CLASES PARA ESTADO DE ERROR =====\r\n // Los colores de error son los mismos en light y dark mode\r\n // Focus en error: solo border-2 sin ring, según especificaciones de Figma\r\n const errorClasses = error\r\n ? `\r\n !border-error-border\r\n focus:!border-2\r\n focus:!border-error-border\r\n dark:!border-error-border\r\n dark:focus:!border-2\r\n dark:focus:!border-error-border\r\n `\r\n : '';\r\n\r\n // ===== CLASES DE RESIZE =====\r\n const resizeClasses =\r\n resize === 'none'\r\n ? 'resize-none'\r\n : resize === 'vertical'\r\n ? 'resize-y'\r\n : resize === 'horizontal'\r\n ? 'resize-x'\r\n : 'resize';\r\n\r\n // ===== CLASES DEL CONTENEDOR =====\r\n // Ancho por defecto: 312px (según especificaciones de Figma)\r\n const containerClasses = fullWidth ? 'w-full' : 'w-[312px]';\r\n\r\n return (\r\n <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>\r\n {/* Label and Description */}\r\n {(label || description) && (\r\n <div className=\"flex flex-col gap-1 w-full\">\r\n {label && (\r\n <label\r\n htmlFor={textareaId}\r\n className=\"font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary\"\r\n >\r\n {label}\r\n </label>\r\n )}\r\n {description && (\r\n <p className=\"text-sm leading-5 text-content-secondary dark:text-dark-content-secondary\">\r\n {description}\r\n </p>\r\n )}\r\n </div>\r\n )}\r\n\r\n {/* Textarea Field */}\r\n <textarea\r\n ref={ref}\r\n id={textareaId}\r\n disabled={disabled}\r\n rows={rows}\r\n className={`\r\n ${baseTextareaClasses}\r\n ${interactiveClasses}\r\n ${errorClasses}\r\n ${resizeClasses}\r\n `.trim().replace(/\\s+/g, ' ')}\r\n {...props}\r\n />\r\n\r\n {/* Helper Text or Error Message */}\r\n {(helperText || errorMessage) && (\r\n <p\r\n className={`\r\n text-sm\r\n leading-5\r\n text-content-tertiary\r\n dark:text-dark-content-tertiary\r\n `.trim().replace(/\\s+/g, ' ')}\r\n >\r\n {error && errorMessage ? errorMessage : helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nTextarea.displayName = 'Textarea';\r\n","import { forwardRef, useEffect, useRef } from 'react';\r\nimport type { CheckboxProps } from './Checkbox.types';\r\n\r\n/**\r\n * Checkbox del sistema de diseño Siesa\r\n *\r\n * Componente de checkbox con soporte completo para estados interactivos,\r\n * indeterminate, y dark mode pixel-perfect según especificaciones de Figma.\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n * - Dark mode con estrategia 'class' (darkMode: 'class')\r\n * - Tokens de color consistentes con la documentación\r\n * - Sombra button-inset para estado checked\r\n * - Type safety con TypeScript estricto\r\n * - Accesibilidad con input nativo y ARIA\r\n *\r\n * @see docs/colors.md - Sistema de colores\r\n * @see docs/typography.md - Sistema tipográfico (Label/Paragraph)\r\n * @see docs/spacing.md - Sistema de espaciado\r\n *\r\n * @example\r\n * ```tsx\r\n * <Checkbox\r\n * label=\"Show on Events Page\"\r\n * description=\"Make this event visible on your profile\"\r\n * checked={true}\r\n * onChange={(e) => console.log(e.target.checked)}\r\n * />\r\n * ```\r\n */\r\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\r\n (\r\n {\r\n label,\r\n description,\r\n checked = false,\r\n indeterminate = false,\r\n disabled = false,\r\n className = '',\r\n id,\r\n onChange,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const combinedRef = (ref as any) || inputRef;\r\n\r\n // Generar ID único si no se proporciona\r\n const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n // Manejar el estado indeterminate\r\n useEffect(() => {\r\n if (combinedRef.current) {\r\n combinedRef.current.indeterminate = indeterminate;\r\n }\r\n }, [indeterminate, combinedRef]);\r\n\r\n // ===== CLASES BASE DEL CHECKBOX =====\r\n const baseCheckboxClasses = `\r\n w-4\r\n h-4\r\n rounded\r\n border\r\n border-border-primary\r\n bg-bg-primary\r\n transition-all\r\n duration-150\r\n flex\r\n items-center\r\n justify-center\r\n dark:bg-dark-bg-primary\r\n dark:border-dark-border-primary\r\n `;\r\n\r\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\r\n const interactiveClasses = !disabled\r\n ? (checked || indeterminate)\r\n ? `\r\n peer-hover:border-[#50a5f7]\r\n peer-focus:ring-2\r\n peer-focus:ring-primary-custom-400/20\r\n peer-focus:border-primary-custom-600\r\n dark:peer-hover:border-[#50a5f7]\r\n dark:peer-focus:border-dark-border-custom\r\n dark:peer-focus:ring-dark-border-custom/20\r\n `\r\n : `\r\n peer-hover:border-[#b6b6b9]\r\n peer-focus:ring-2\r\n peer-focus:ring-primary-custom-400/20\r\n peer-focus:border-primary-custom-600\r\n dark:peer-hover:border-[#b6b6b9]\r\n dark:peer-focus:border-dark-border-custom\r\n dark:peer-focus:ring-dark-border-custom/20\r\n `\r\n : `\r\n opacity-50\r\n cursor-not-allowed\r\n `;\r\n\r\n // ===== CLASES PARA ESTADO CHECKED/INDETERMINATE =====\r\n // Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n const checkedClasses = checked || indeterminate\r\n ? `\r\n !bg-primary-custom-600\r\n !border-primary-custom-500\r\n shadow-button-inset\r\n dark:!bg-dark-bg-inverse\r\n dark:!border-dark-bg-inverse\r\n `\r\n : '';\r\n\r\n // ===== COMBINAR TODAS LAS CLASES DEL CHECKBOX =====\r\n const checkboxClasses = [\r\n baseCheckboxClasses,\r\n interactiveClasses,\r\n checkedClasses,\r\n disabled ? 'cursor-not-allowed' : 'cursor-pointer',\r\n ]\r\n .join(' ')\r\n .replace(/\\s+/g, ' ')\r\n .trim();\r\n\r\n return (\r\n <div className={`inline-flex gap-3 items-start ${className}`}>\r\n {/* Checkbox Input Container */}\r\n <div className=\"flex items-center justify-center h-5 w-4 shrink-0\">\r\n {/* Native Input (hidden but accessible) */}\r\n <input\r\n ref={combinedRef}\r\n type=\"checkbox\"\r\n id={checkboxId}\r\n checked={checked}\r\n disabled={disabled}\r\n onChange={onChange}\r\n className=\"peer sr-only\"\r\n {...props}\r\n />\r\n\r\n {/* Custom Checkbox Visual */}\r\n <label htmlFor={checkboxId} className={checkboxClasses}>\r\n {/* Check Icon - Usar primary-inverse-content para consistencia */}\r\n {checked && !indeterminate && (\r\n <svg\r\n className=\"w-3 h-3 text-primary-inverse-content pointer-events-none\"\r\n viewBox=\"0 0 12 12\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M10 3L4.5 8.5L2 6\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n\r\n {/* Indeterminate Icon (minus) - Usar primary-inverse-content */}\r\n {indeterminate && (\r\n <svg\r\n className=\"w-3 h-3 text-primary-inverse-content pointer-events-none\"\r\n viewBox=\"0 0 12 12\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M2 6H10\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </label>\r\n </div>\r\n\r\n {/* Label and Description */}\r\n {(label || description) && (\r\n <label\r\n htmlFor={checkboxId}\r\n className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${\r\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\r\n }`}\r\n >\r\n {/* Label - Label/Small (14px, Bold) */}\r\n {label && (\r\n <span className=\"font-bold text-content-primary dark:text-dark-content-primary\">\r\n {label}\r\n </span>\r\n )}\r\n {/* Description - Paragraph/Small (14px, Regular) */}\r\n {description && (\r\n <span className=\"font-normal text-content-secondary dark:text-content-secondary\">\r\n {description}\r\n </span>\r\n )}\r\n </label>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nCheckbox.displayName = 'Checkbox';\r\n","import { forwardRef } from 'react';\r\nimport type { RadioProps } from './Radio.types';\r\n\r\n/**\r\n * Radio - Componente de radio button del sistema de diseño Siesa\r\n *\r\n * Campo de selección única diseñado para cumplir con las especificaciones\r\n * de Figma con soporte completo para dark mode y accesibilidad.\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n * - Dark mode con estrategia 'class' (darkMode: 'class')\r\n * - Tokens de color consistentes con la documentación\r\n * - Type safety con TypeScript estricto\r\n * - Accesibilidad con keyboard navigation y ARIA\r\n * - Inner shadow en estado checked según especificaciones Figma\r\n *\r\n * Estados soportados:\r\n * - Default, Hover, Focus, Disabled\r\n * - Checked / Unchecked\r\n * - Label y description opcionales\r\n *\r\n * @see docs/colors.md - Sistema de colores\r\n * @see docs/typography.md - Sistema tipográfico\r\n * @see docs/spacing.md - Sistema de espaciado\r\n *\r\n * @example\r\n * ```tsx\r\n * // Radio simple\r\n * <Radio\r\n * label=\"Allow tickets to be resold\"\r\n * description=\"Customers can resell or transfer their tickets\"\r\n * value=\"resell\"\r\n * name=\"ticketOptions\"\r\n * checked={true}\r\n * onChange={(e) => console.log(e.target.checked)}\r\n * />\r\n *\r\n * // Radio group\r\n * <div>\r\n * <Radio label=\"Option 1\" name=\"group\" value=\"1\" checked={selected === \"1\"} onChange={handleChange} />\r\n * <Radio label=\"Option 2\" name=\"group\" value=\"2\" checked={selected === \"2\"} onChange={handleChange} />\r\n * </div>\r\n * ```\r\n */\r\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\r\n (\r\n {\r\n label,\r\n description,\r\n checked = false,\r\n disabled = false,\r\n className = '',\r\n id,\r\n onChange,\r\n value,\r\n name,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Generar ID único si no se proporciona\r\n const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n // ===== CLASES BASE DEL RADIO BUTTON =====\r\n const baseRadioClasses = `\r\n w-4\r\n h-4\r\n rounded-full\r\n border\r\n border-border-primary\r\n bg-bg-primary\r\n transition-all\r\n duration-150\r\n flex\r\n items-center\r\n justify-center\r\n dark:bg-dark-bg-primary\r\n dark:border-dark-border-primary\r\n `;\r\n\r\n // ===== CLASES PARA ESTADOS INTERACTIVOS =====\r\n const interactiveClasses = !disabled\r\n ? `\r\n peer-hover:border-primary-custom-600\r\n peer-focus:ring-2\r\n peer-focus:ring-primary-custom-400\r\n peer-focus:border-primary-custom-600\r\n dark:peer-hover:border-dark-border-custom\r\n dark:peer-focus:ring-dark-border-custom\r\n dark:peer-focus:border-dark-border-custom\r\n `\r\n : `\r\n opacity-50\r\n cursor-not-allowed\r\n `;\r\n\r\n // ===== CLASES PARA CHECKED STATE =====\r\n // Según Figma: bg #0e79fd, border #3c9bf6, inner shadow\r\n const checkedClasses = checked\r\n ? `\r\n !bg-primary-custom-600\r\n !border-primary-inverse-border\r\n shadow-[0px_2px_0px_0px_inset_rgba(255,255,255,0.15)]\r\n dark:!bg-dark-bg-inverse\r\n dark:!border-dark-bg-inverse\r\n `\r\n : '';\r\n\r\n return (\r\n <div className={`flex gap-3 items-start ${className}`}>\r\n {/* Radio Input Container */}\r\n <div className=\"flex items-center justify-center h-5 w-4 shrink-0\">\r\n {/* Native Input (hidden but accessible) */}\r\n <input\r\n ref={ref}\r\n type=\"radio\"\r\n id={radioId}\r\n checked={checked}\r\n disabled={disabled}\r\n onChange={onChange}\r\n value={value}\r\n name={name}\r\n className=\"peer sr-only\"\r\n {...props}\r\n />\r\n\r\n {/* Custom Radio Visual */}\r\n <label\r\n htmlFor={radioId}\r\n className={`\r\n ${baseRadioClasses}\r\n ${interactiveClasses}\r\n ${checkedClasses}\r\n ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}\r\n `.trim().replace(/\\s+/g, ' ')}\r\n >\r\n {/* Inner Circle (checked state) - 6px white dot según Figma */}\r\n {checked && (\r\n <div className=\"w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse\" />\r\n )}\r\n </label>\r\n </div>\r\n\r\n {/* Label and Description */}\r\n {(label || description) && (\r\n <label\r\n htmlFor={radioId}\r\n className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${\r\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\r\n }`}\r\n >\r\n {label && (\r\n <span className=\"font-bold text-content-primary dark:text-dark-content-primary\">\r\n {label}\r\n </span>\r\n )}\r\n {description && (\r\n <span className=\"font-normal text-content-secondary dark:text-content-secondary\">\r\n {description}\r\n </span>\r\n )}\r\n </label>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nRadio.displayName = 'Radio';\r\n","import { forwardRef } from 'react';\r\nimport type { SwitchProps } from './Switch.types';\r\n\r\n/**\r\n * Switch - Componente de switch del sistema de diseño Siesa\r\n *\r\n * Campo de activación/desactivación con soporte para:\r\n * - Estados: default, hover, focus, disabled\r\n * - On, off\r\n * - Label y description opcionales\r\n * - Posición del label: leading (izquierda) o trailing (derecha)\r\n * - Animación suave de transición\r\n * - Dark mode completo\r\n * - Accesibilidad completa\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n * - Dark mode con estrategia 'class' (darkMode: 'class')\r\n * - Tokens de color consistentes con la documentación\r\n * - Focus ring con shadow especial según Figma\r\n * - Type safety con TypeScript estricto\r\n * - Accesibilidad con ARIA labels\r\n *\r\n * @see docs/colors.md - Sistema de colores\r\n * @see docs/typography.md - Sistema tipográfico\r\n * @see docs/spacing.md - Sistema de espaciado\r\n *\r\n * @example\r\n * ```tsx\r\n * // Label a la izquierda (default)\r\n * <Switch\r\n * label=\"Permitir inserción\"\r\n * description=\"Permite que otros inserten los detalles de tu evento.\"\r\n * checked={true}\r\n * onChange={(e) => console.log(e.target.checked)}\r\n * />\r\n *\r\n * // Label a la derecha\r\n * <Switch\r\n * label=\"Activar notificaciones\"\r\n * labelPosition=\"trailing\"\r\n * checked={false}\r\n * onChange={(e) => console.log(e.target.checked)}\r\n * />\r\n * ```\r\n */\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\r\n (\r\n {\r\n label,\r\n description,\r\n labelPosition = 'leading',\r\n checked = false,\r\n disabled = false,\r\n className = '',\r\n id,\r\n onChange,\r\n ariaLabel,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Generar ID único si no se proporciona\r\n const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n // ===== CLASES BASE DEL TRACK =====\r\n const baseTrackClasses = `\r\n w-8\r\n h-5\r\n rounded-xl\r\n border\r\n overflow-hidden\r\n relative\r\n transition-all\r\n duration-200\r\n `;\r\n\r\n // ===== CLASES DE ESTADO DEL TRACK =====\r\n const getTrackStateClasses = () => {\r\n if (disabled) {\r\n return checked\r\n ? `\r\n bg-primary-custom-600\r\n border-primary-inverse-border\r\n opacity-50\r\n cursor-not-allowed\r\n dark:bg-primary-custom-600\r\n dark:border-primary-inverse-border\r\n `\r\n : `\r\n bg-[#fafafa]\r\n border-border-primary\r\n opacity-50\r\n cursor-not-allowed\r\n dark:bg-dark-bg-primary\r\n dark:border-dark-border-primary\r\n `;\r\n }\r\n\r\n return checked\r\n ? `\r\n bg-primary-custom-600\r\n border-primary-inverse-border\r\n cursor-pointer\r\n peer-hover:border-[#307cc5]\r\n peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\r\n dark:bg-primary-custom-600\r\n dark:border-primary-inverse-border\r\n dark:peer-hover:border-[#307cc5]\r\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]\r\n `\r\n : `\r\n bg-[#fafafa]\r\n border-border-primary\r\n cursor-pointer\r\n peer-hover:border-[#b6b6b9]\r\n peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]\r\n dark:bg-dark-bg-primary\r\n dark:border-dark-border-primary\r\n dark:peer-hover:border-[#b6b6b9]\r\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]\r\n `;\r\n };\r\n\r\n // ===== CLASES DEL BOTÓN (CÍRCULO) =====\r\n const getButtonClasses = () => {\r\n const baseButtonClasses = `\r\n absolute\r\n w-4\r\n h-4\r\n bg-white\r\n rounded-[10px]\r\n border\r\n top-1/2\r\n -translate-y-1/2\r\n transition-all\r\n duration-200\r\n `;\r\n\r\n // Posición: OFF = left-px (1px), ON = left-[13px]\r\n const positionClass = checked ? 'left-[13px]' : 'left-px';\r\n\r\n if (disabled) {\r\n const borderClass = checked\r\n ? 'border-primary-inverse-border dark:border-primary-inverse-border'\r\n : 'border-border-primary dark:border-dark-border-primary';\r\n return `${baseButtonClasses} ${positionClass} ${borderClass}`;\r\n }\r\n\r\n const borderClass = checked\r\n ? `\r\n border-primary-inverse-border\r\n peer-hover:border-[#307cc5]\r\n dark:border-primary-inverse-border\r\n dark:peer-hover:border-[#307cc5]\r\n `\r\n : `\r\n border-border-primary\r\n peer-hover:border-[#b6b6b9]\r\n dark:border-dark-border-primary\r\n dark:peer-hover:border-[#b6b6b9]\r\n `;\r\n\r\n return `${baseButtonClasses} ${positionClass} ${borderClass}`;\r\n };\r\n\r\n // ===== COMBINAR CLASES =====\r\n const trackClasses = [\r\n baseTrackClasses,\r\n getTrackStateClasses(),\r\n ]\r\n .join(' ')\r\n .replace(/\\s+/g, ' ')\r\n .trim();\r\n\r\n const buttonClasses = getButtonClasses()\r\n .replace(/\\s+/g, ' ')\r\n .trim();\r\n\r\n // ===== COMPONENTES REUTILIZABLES =====\r\n const LabelContent = (label || description) ? (\r\n <label\r\n htmlFor={switchId}\r\n className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${\r\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\r\n }`}\r\n >\r\n {label && (\r\n <span className=\"font-bold text-content-primary dark:text-dark-content-primary\">\r\n {label}\r\n </span>\r\n )}\r\n {description && (\r\n <span className=\"font-normal text-content-secondary dark:text-content-secondary\">\r\n {description}\r\n </span>\r\n )}\r\n </label>\r\n ) : null;\r\n\r\n const SwitchInput = (\r\n <div className=\"flex items-center justify-center shrink-0\">\r\n {/* Native Input (hidden but accessible) */}\r\n <input\r\n ref={ref}\r\n type=\"checkbox\"\r\n id={switchId}\r\n checked={checked}\r\n disabled={disabled}\r\n onChange={onChange}\r\n className=\"peer sr-only\"\r\n aria-label={ariaLabel || label}\r\n {...props}\r\n />\r\n\r\n {/* Custom Switch Visual */}\r\n <label\r\n htmlFor={switchId}\r\n className={trackClasses}\r\n aria-hidden=\"true\"\r\n >\r\n {/* Button (sliding circle) */}\r\n <div className={buttonClasses} />\r\n </label>\r\n </div>\r\n );\r\n\r\n return (\r\n <div className={`flex gap-2 items-center w-[344px] ${className}`}>\r\n {labelPosition === 'leading' ? (\r\n <>\r\n {LabelContent}\r\n {SwitchInput}\r\n </>\r\n ) : (\r\n <>\r\n {SwitchInput}\r\n {LabelContent}\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nSwitch.displayName = 'Switch';\r\n","import { forwardRef } from 'react';\r\nimport type { AvatarProps } from './Avatar.types';\r\n\r\n/**\r\n * Avatar - Componente de avatar del sistema de diseño Siesa\r\n *\r\n * Componente para mostrar imágenes de usuario o iniciales con soporte para:\r\n * - Tamaños: 4 (20px), 6 (24px), 8 (32px), 10 (40px)\r\n * - Tipos: circular (completamente redondo) y rounded (esquinas redondeadas)\r\n * - Imagen o iniciales\r\n * - Dark mode completo\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n * - Dark mode con estrategia 'class' (darkMode: 'class')\r\n * - Tokens de color consistentes con la documentación\r\n * - Tipografía adaptativa según tamaño\r\n * - Type safety con TypeScript estricto\r\n *\r\n * @see docs/colors.md - Sistema de colores\r\n * @see docs/typography.md - Sistema tipográfico\r\n * @see docs/spacing.md - Sistema de espaciado\r\n *\r\n * @example\r\n * ```tsx\r\n * // Con imagen\r\n * <Avatar\r\n * src=\"/path/to/image.jpg\"\r\n * alt=\"John Doe\"\r\n * size=\"10\"\r\n * type=\"circular\"\r\n * />\r\n *\r\n * // Con iniciales\r\n * <Avatar\r\n * initials=\"JD\"\r\n * size=\"10\"\r\n * type=\"circular\"\r\n * />\r\n * ```\r\n */\r\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(\r\n (\r\n {\r\n size = '10',\r\n type = 'circular',\r\n src,\r\n alt = '',\r\n initials,\r\n className = '',\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // ===== CLASES DE TAMAÑO =====\r\n // Tamaño del contenedor del avatar\r\n const containerSizeClasses = {\r\n '4': 'w-5 h-5',\r\n '6': 'w-6 h-6',\r\n '8': 'w-8 h-8',\r\n '10': 'w-10 h-10',\r\n };\r\n\r\n // ===== CLASES DE TEXTO =====\r\n // Tamaño de texto para iniciales (basado en sistema tipográfico)\r\n const textSizeClasses = {\r\n '4': 'text-xs', // 12px - Paragraph Tiny\r\n '6': 'text-xs', // 12px - Paragraph Tiny\r\n '8': 'text-sm', // 14px - Paragraph Small\r\n '10': 'text-base', // 16px - Paragraph Base\r\n };\r\n\r\n // ===== CLASES DE TIPO (Forma) =====\r\n const typeClasses = {\r\n circular: 'rounded-full',\r\n rounded: 'rounded-md',\r\n };\r\n\r\n // ===== CLASES BASE =====\r\n const baseClasses = `\r\n relative\r\n inline-flex\r\n items-center\r\n justify-center\r\n overflow-hidden\r\n ${containerSizeClasses[size]}\r\n ${typeClasses[type]}\r\n `;\r\n\r\n // Si hay imagen, mostrarla\r\n if (src) {\r\n return (\r\n <div\r\n ref={ref}\r\n className={`${baseClasses} ${className}`.trim().replace(/\\s+/g, ' ')}\r\n >\r\n <img\r\n src={src}\r\n alt={alt}\r\n className=\"w-full h-full object-cover\"\r\n {...(props as any)}\r\n />\r\n </div>\r\n );\r\n }\r\n\r\n // Si hay iniciales, mostrarlas\r\n if (initials) {\r\n return (\r\n <div\r\n ref={ref}\r\n className={`\r\n ${baseClasses}\r\n ${textSizeClasses[size]}\r\n bg-content-primary\r\n text-white\r\n font-normal\r\n dark:bg-dark-bg-inverse\r\n dark:text-dark-content-inverse\r\n ${className}\r\n `.trim().replace(/\\s+/g, ' ')}\r\n >\r\n <span className=\"leading-none\">{initials}</span>\r\n </div>\r\n );\r\n }\r\n\r\n // Fallback: avatar vacío\r\n return (\r\n <div\r\n ref={ref}\r\n className={`\r\n ${baseClasses}\r\n bg-background-secondary\r\n dark:bg-dark-bg-primary\r\n ${className}\r\n `.trim().replace(/\\s+/g, ' ')}\r\n />\r\n );\r\n }\r\n);\r\n\r\nAvatar.displayName = 'Avatar';\r\n","import { forwardRef } from 'react';\r\nimport type { DividerProps } from './Divider.types';\r\n\r\n/**\r\n * Divider del sistema de diseño Siesa\r\n *\r\n * Línea horizontal de 1px para separar contenido visual o semánticamente.\r\n * Implementa dos variantes con soporte completo de dark mode.\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n * - Dark mode con estrategia 'class' (darkMode: 'class')\r\n * - Tokens de color consistentes con la documentación\r\n * - Type safety con TypeScript estricto\r\n * - Componente semántico usando elemento <hr>\r\n *\r\n * @see docs/colors.md - Sistema de colores (border-primary, border-secondary)\r\n * @see docs/spacing.md - Sistema de espaciado (altura de 1px)\r\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4096-8445 - Especificaciones Figma\r\n *\r\n * @example\r\n * ```tsx\r\n * // Default divider (más visible)\r\n * <Divider />\r\n * <Divider type=\"default\" />\r\n *\r\n * // Soft divider (más sutil)\r\n * <Divider type=\"soft\" />\r\n *\r\n * // Con clases personalizadas\r\n * <Divider className=\"my-6\" />\r\n * ```\r\n */\r\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(\r\n (\r\n {\r\n type = 'default',\r\n className = '',\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // ===== CLASES DE TIPO =====\r\n // Orden de modificadores: {dark}:{utility}\r\n const typeClasses = {\r\n // Default: Línea más visible para separaciones claras\r\n // Light: border-primary (#e4e4e7)\r\n // Dark: dark-border-primary (#71717a)\r\n default: 'bg-border-primary dark:bg-dark-border-primary',\r\n\r\n // Soft: Línea más sutil para separaciones suaves\r\n // Light: border-secondary (#f4f4f5 - muy claro)\r\n // Dark: gray-700 (#374151 - gris medio-oscuro, más sutil que dark-border-primary)\r\n soft: 'bg-border-secondary dark:bg-gray-700',\r\n };\r\n\r\n // ===== CLASES BASE =====\r\n const baseClasses = 'w-full h-px border-0';\r\n\r\n // ===== COMBINAR CLASES =====\r\n const finalClasses = [\r\n baseClasses,\r\n typeClasses[type],\r\n className,\r\n ]\r\n .join(' ')\r\n .replace(/\\s+/g, ' ')\r\n .trim();\r\n\r\n return (\r\n <hr\r\n ref={ref}\r\n className={finalClasses}\r\n {...props}\r\n />\r\n );\r\n }\r\n);\r\n\r\nDivider.displayName = 'Divider';\r\n","import { forwardRef } from 'react';\r\nimport type { DescriptionListProps } from './DescriptionList.types';\r\n\r\n/**\r\n * DescriptionList del sistema de diseño Siesa\r\n *\r\n * Componente para mostrar información estructurada en formato clave-valor (term/details).\r\n * Layout de dos columnas con separador inferior entre items.\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n * - Dark mode con estrategia 'class' (darkMode: 'class')\r\n * - Tokens de color consistentes con la documentación\r\n * - Type safety con TypeScript estricto\r\n * - Layout flexible y responsive\r\n * - Tipografía del sistema (Paragraph/Small - 14px)\r\n *\r\n * @see docs/colors.md - Sistema de colores (content-primary, content-secondary)\r\n * @see docs/typography.md - Sistema tipográfico (Paragraph/Small)\r\n * @see docs/spacing.md - Sistema de espaciado (padding, gaps)\r\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4103-8449 - Especificaciones Figma\r\n *\r\n * @example\r\n * ```tsx\r\n * // Item básico\r\n * <DescriptionList\r\n * term=\"Customer\"\r\n * details=\"Jhonatan Diaz\"\r\n * />\r\n *\r\n * // Lista completa\r\n * <div>\r\n * <DescriptionList term=\"Event\" details=\"Bear Hug: Live in Concert\" />\r\n * <DescriptionList term=\"Amount\" details=\"$120,000 COP\" />\r\n * <DescriptionList term=\"Fee\" details=\"$20,000 COP\" />\r\n * </div>\r\n * ```\r\n */\r\nexport const DescriptionList = forwardRef<HTMLDivElement, DescriptionListProps>(\r\n (\r\n {\r\n term,\r\n details,\r\n className = '',\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // ===== CLASES BASE =====\r\n const baseClasses = `\r\n flex\r\n flex-wrap\r\n gap-1\r\n items-start\r\n py-2.5\r\n border-b\r\n border-border-secondary\r\n dark:border-gray-700\r\n `;\r\n\r\n // ===== CLASES DE COLUMNA =====\r\n // Cada columna ocupa el 50% del espacio disponible (flex-1)\r\n // con un ancho mínimo de 180px para mantener legibilidad\r\n const columnClasses = 'flex-1 min-w-[180px]';\r\n\r\n // ===== COMBINAR CLASES =====\r\n const finalClasses = [baseClasses, className]\r\n .join(' ')\r\n .replace(/\\s+/g, ' ')\r\n .trim();\r\n\r\n return (\r\n <div ref={ref} className={finalClasses} {...props}>\r\n {/* Term Column (izquierda) */}\r\n {/* Light: content-secondary (#a1a1aa) */}\r\n {/* Dark: gray-400 (#9ca3af - gris medio claro para mantener contraste) */}\r\n <div className={columnClasses}>\r\n <p className=\"text-sm leading-5 text-content-secondary dark:text-gray-400 font-normal\">\r\n {term}\r\n </p>\r\n </div>\r\n\r\n {/* Details Column (derecha) */}\r\n {/* Light: content-primary (#18181b) */}\r\n {/* Dark: dark-content-primary (#ffffff) */}\r\n <div className={columnClasses}>\r\n <p className=\"text-sm leading-5 text-content-primary dark:text-dark-content-primary font-normal\">\r\n {details}\r\n </p>\r\n </div>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nDescriptionList.displayName = 'DescriptionList';\r\n","import { forwardRef } from 'react';\r\nimport type { AlertProps } from './Alert.types';\r\nimport { Button } from '../Button/Button';\r\n\r\n/**\r\n * Alert - Componente de alerta/diálogo del sistema de diseño Siesa\r\n *\r\n * Componente modal para confirmaciones con soporte para:\r\n * - Título y descripción\r\n * - Contenido personalizado (children)\r\n * - Botones de acción personalizados o por defecto\r\n * - Dark mode\r\n *\r\n * @example\r\n * ```tsx\r\n * <Alert\r\n * title=\"Are you sure you want to refund this payment?\"\r\n * description=\"The refund will be reflected in 2 to 3 business days.\"\r\n * onCancel={() => console.log('Cancelled')}\r\n * onConfirm={() => console.log('Confirmed')}\r\n * confirmText=\"Refund\"\r\n * />\r\n * ```\r\n */\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(\r\n (\r\n {\r\n title,\r\n description,\r\n children,\r\n actions,\r\n onCancel,\r\n onConfirm,\r\n cancelText = 'Cancelar',\r\n confirmText = 'Confirmar',\r\n className = '',\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Si se proveen actions personalizadas, usarlas. Si no, usar botones por defecto\r\n const actionButtons = actions || (\r\n <>\r\n {onCancel && (\r\n <Button type=\"plain\" size=\"base\" onClick={onCancel}>\r\n {cancelText}\r\n </Button>\r\n )}\r\n {onConfirm && (\r\n <Button type=\"default\" size=\"base\" onClick={onConfirm}>\r\n {confirmText}\r\n </Button>\r\n )}\r\n </>\r\n );\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={`\r\n w-[512px]\r\n bg-white\r\n dark:bg-dark-bg-primary\r\n border\r\n border-border-primary\r\n dark:border-dark-border-primary\r\n rounded-xl\r\n ${className}\r\n `.trim().replace(/\\s+/g, ' ')}\r\n {...props}\r\n >\r\n {/* Content Container */}\r\n <div className=\"p-6 flex flex-col gap-4\">\r\n {/* Text Section */}\r\n <div className=\"flex flex-col gap-3\">\r\n {/* Title */}\r\n <p className=\"text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary\">\r\n {title}\r\n </p>\r\n\r\n {/* Description (optional) */}\r\n {description && (\r\n <p className=\"text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary\">\r\n {description}\r\n </p>\r\n )}\r\n </div>\r\n\r\n {/* Body Content (optional) */}\r\n {children && (\r\n <div className=\"flex flex-col gap-3\">\r\n {children}\r\n </div>\r\n )}\r\n\r\n {/* Actions */}\r\n <div className=\"flex flex-wrap gap-3 items-center justify-end\">\r\n {actionButtons}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nAlert.displayName = 'Alert';\r\n","import { forwardRef, cloneElement } from 'react';\r\nimport type { BadgeProps, BadgeColor } from './Badge.types';\r\n\r\n/**\r\n * Badge del sistema de diseño Siesa\r\n *\r\n * Componente para mostrar etiquetas con múltiples variantes de color.\r\n * Los badges mantienen sus colores vibrantes en light y dark mode para\r\n * garantizar visibilidad y consistencia visual.\r\n *\r\n * Características implementadas:\r\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)\r\n * - Icono opcional a la izquierda (12x12px)\r\n * - Contador/notification badge opcional\r\n * - Estados hover con transiciones suaves\r\n * - Los colores se mantienen vibrantes en dark mode (según diseño Figma)\r\n * - Tipografía: Label Tiny (12px Bold)\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Tokens de color de Tailwind estándar para badges\r\n * - Font-family explícita (SiesaBT via font-sans)\r\n * - Transiciones suaves (duration-200)\r\n * - Estructura clara y mantenible\r\n *\r\n * @see docs/typography.md - Sistema tipográfico (Label Tiny)\r\n * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4130-9382\r\n *\r\n * @example\r\n * ```tsx\r\n * // Badge simple\r\n * <Badge color=\"blue\" label=\"Label\" />\r\n *\r\n * // Badge con icono\r\n * <Badge color=\"green\" label=\"Success\" leftIcon={<CheckIcon />} />\r\n *\r\n * // Badge con contador\r\n * <Badge color=\"red\" label=\"Errors\" count={5} />\r\n *\r\n * // Badge completo\r\n * <Badge color=\"primary\" label=\"Messages\" leftIcon={<MailIcon />} count={12} />\r\n * ```\r\n */\r\nexport const Badge = forwardRef<HTMLDivElement, BadgeProps>(\r\n (\r\n {\r\n color = 'zinc',\r\n leftIcon,\r\n label,\r\n count,\r\n className = '',\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Map de colores - En dark mode mantienen los mismos colores vibrantes según Figma\r\n const colorClasses: Record<BadgeColor, { bg: string; text: string; hover: string; notificationBg: string; notificationText: string }> = {\r\n zinc: {\r\n bg: 'bg-zinc-100',\r\n text: 'text-zinc-600',\r\n hover: 'hover:bg-zinc-200',\r\n notificationBg: 'bg-zinc-600',\r\n notificationText: 'text-zinc-100',\r\n },\r\n red: {\r\n bg: 'bg-red-100',\r\n text: 'text-red-700',\r\n hover: 'hover:bg-red-200',\r\n notificationBg: 'bg-red-700',\r\n notificationText: 'text-red-100',\r\n },\r\n orange: {\r\n bg: 'bg-orange-100',\r\n text: 'text-orange-700',\r\n hover: 'hover:bg-orange-200',\r\n notificationBg: 'bg-orange-700',\r\n notificationText: 'text-orange-100',\r\n },\r\n amber: {\r\n bg: 'bg-amber-100',\r\n text: 'text-amber-700',\r\n hover: 'hover:bg-amber-200',\r\n notificationBg: 'bg-amber-700',\r\n notificationText: 'text-amber-100',\r\n },\r\n yellow: {\r\n bg: 'bg-yellow-100',\r\n text: 'text-yellow-700',\r\n hover: 'hover:bg-yellow-200',\r\n notificationBg: 'bg-yellow-700',\r\n notificationText: 'text-yellow-100',\r\n },\r\n lime: {\r\n bg: 'bg-lime-100',\r\n text: 'text-lime-700',\r\n hover: 'hover:bg-lime-200',\r\n notificationBg: 'bg-lime-700',\r\n notificationText: 'text-lime-100',\r\n },\r\n green: {\r\n bg: 'bg-green-100',\r\n text: 'text-green-700',\r\n hover: 'hover:bg-green-200',\r\n notificationBg: 'bg-green-700',\r\n notificationText: 'text-green-100',\r\n },\r\n emerald: {\r\n bg: 'bg-emerald-100',\r\n text: 'text-emerald-700',\r\n hover: 'hover:bg-emerald-200',\r\n notificationBg: 'bg-emerald-700',\r\n notificationText: 'text-emerald-100',\r\n },\r\n teal: {\r\n bg: 'bg-teal-100',\r\n text: 'text-teal-700',\r\n hover: 'hover:bg-teal-200',\r\n notificationBg: 'bg-teal-700',\r\n notificationText: 'text-teal-100',\r\n },\r\n cyan: {\r\n bg: 'bg-cyan-100',\r\n text: 'text-cyan-700',\r\n hover: 'hover:bg-cyan-200',\r\n notificationBg: 'bg-cyan-700',\r\n notificationText: 'text-cyan-100',\r\n },\r\n sky: {\r\n bg: 'bg-sky-100',\r\n text: 'text-sky-700',\r\n hover: 'hover:bg-sky-200',\r\n notificationBg: 'bg-sky-700',\r\n notificationText: 'text-sky-100',\r\n },\r\n blue: {\r\n bg: 'bg-blue-100',\r\n text: 'text-blue-700',\r\n hover: 'hover:bg-blue-200',\r\n notificationBg: 'bg-blue-700',\r\n notificationText: 'text-blue-100',\r\n },\r\n indigo: {\r\n bg: 'bg-indigo-100',\r\n text: 'text-indigo-700',\r\n hover: 'hover:bg-indigo-200',\r\n notificationBg: 'bg-indigo-700',\r\n notificationText: 'text-indigo-100',\r\n },\r\n violet: {\r\n bg: 'bg-violet-100',\r\n text: 'text-violet-700',\r\n hover: 'hover:bg-violet-200',\r\n notificationBg: 'bg-violet-700',\r\n notificationText: 'text-violet-100',\r\n },\r\n purple: {\r\n bg: 'bg-purple-100',\r\n text: 'text-purple-700',\r\n hover: 'hover:bg-purple-200',\r\n notificationBg: 'bg-purple-700',\r\n notificationText: 'text-purple-100',\r\n },\r\n fuchsia: {\r\n bg: 'bg-fuchsia-100',\r\n text: 'text-fuchsia-700',\r\n hover: 'hover:bg-fuchsia-200',\r\n notificationBg: 'bg-fuchsia-700',\r\n notificationText: 'text-fuchsia-100',\r\n },\r\n pink: {\r\n bg: 'bg-pink-100',\r\n text: 'text-pink-700',\r\n hover: 'hover:bg-pink-200',\r\n notificationBg: 'bg-pink-700',\r\n notificationText: 'text-pink-100',\r\n },\r\n rose: {\r\n bg: 'bg-rose-100',\r\n text: 'text-rose-700',\r\n hover: 'hover:bg-rose-200',\r\n notificationBg: 'bg-rose-700',\r\n notificationText: 'text-rose-100',\r\n },\r\n primary: {\r\n bg: 'bg-primary-custom-100',\r\n text: 'text-primary-custom-600',\r\n hover: 'hover:bg-primary-custom-200',\r\n notificationBg: 'bg-primary-custom-600',\r\n notificationText: 'text-primary-custom-100',\r\n },\r\n secondary: {\r\n bg: 'bg-zinc-100',\r\n text: 'text-zinc-600',\r\n hover: 'hover:bg-zinc-200',\r\n notificationBg: 'bg-zinc-600',\r\n notificationText: 'text-zinc-100',\r\n },\r\n tertiary: {\r\n bg: 'bg-zinc-100',\r\n text: 'text-zinc-600',\r\n hover: 'hover:bg-zinc-200',\r\n notificationBg: 'bg-zinc-600',\r\n notificationText: 'text-zinc-100',\r\n },\r\n };\r\n\r\n const colors = colorClasses[color];\r\n\r\n // Renderizar icono con tamaño correcto (12x12)\r\n const renderIcon = (icon: React.ReactElement) => {\r\n const existingClassName = (icon.props as any).className || '';\r\n return cloneElement(icon as React.ReactElement<any>, {\r\n className: `w-3 h-3 ${existingClassName}`.trim(),\r\n });\r\n };\r\n\r\n // ===== COMBINAR CLASES =====\r\n const finalClasses = [\r\n 'inline-flex',\r\n 'items-center',\r\n 'gap-1',\r\n 'px-1.5',\r\n 'py-1',\r\n 'rounded-md',\r\n 'font-sans',\r\n colors.bg,\r\n colors.hover,\r\n 'transition-colors',\r\n 'duration-200',\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(' ')\r\n .replace(/\\s+/g, ' ')\r\n .trim();\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={finalClasses}\r\n {...props}\r\n >\r\n {/* Icono izquierdo */}\r\n {leftIcon && (\r\n <div className={`flex items-center justify-center ${colors.text}`}>\r\n {renderIcon(leftIcon)}\r\n </div>\r\n )}\r\n\r\n {/* Label del badge */}\r\n <span className={`font-sans text-xs leading-4 ${colors.text}`}>\r\n {label}\r\n </span>\r\n\r\n {/* Notification badge (contador) */}\r\n {count !== undefined && (\r\n <div\r\n className={`\r\n h-3\r\n flex\r\n items-center\r\n justify-center\r\n px-0.5\r\n rounded-sm\r\n min-w-[12px]\r\n ${colors.notificationBg}\r\n `.trim().replace(/\\s+/g, ' ')}\r\n >\r\n <span className={`font-sans text-xs leading-4 ${colors.notificationText}`}>\r\n {count}\r\n </span>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nBadge.displayName = 'Badge';\r\n","import { forwardRef, useState, useEffect } from 'react';\r\nimport type { QuantityProps } from './Quantity.types';\r\n\r\n/**\r\n * Quantity - Componente de cantidad del sistema de diseño Siesa\r\n *\r\n * Componente para seleccionar cantidades con soporte para:\r\n * - Botones de incremento/decremento\r\n * - Valores mínimo y máximo\r\n * - Label opcional con link\r\n * - Texto de ayuda opcional\r\n * - Estado de error\r\n * - Estado deshabilitado\r\n * - Dark mode completo\r\n *\r\n * Mejores prácticas implementadas:\r\n * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}\r\n * - Dark mode con estrategia 'class' (darkMode: 'class')\r\n * - Tokens de color consistentes con la documentación\r\n * - Focus rings adaptativos para light y dark mode\r\n * - Type safety con TypeScript estricto\r\n * - Accesibilidad con ARIA labels\r\n *\r\n * @see docs/colors.md - Sistema de colores\r\n * @see docs/typography.md - Sistema tipográfico\r\n * @see docs/spacing.md - Sistema de espaciado\r\n *\r\n * @example\r\n * ```tsx\r\n * <Quantity\r\n * label=\"Cantidad\"\r\n * value={5}\r\n * min={0}\r\n * max={10}\r\n * onChange={(value) => console.log(value)}\r\n * />\r\n * ```\r\n */\r\nexport const Quantity = forwardRef<HTMLDivElement, QuantityProps>(\r\n (\r\n {\r\n value: controlledValue,\r\n defaultValue = 0,\r\n onChange,\r\n min = 0,\r\n max,\r\n label,\r\n linkText,\r\n onLinkClick,\r\n helperText,\r\n error = false,\r\n disabled = false,\r\n className = '',\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Estado interno para valor no controlado\r\n const [internalValue, setInternalValue] = useState(defaultValue);\r\n const isControlled = controlledValue !== undefined;\r\n const currentValue = isControlled ? controlledValue : internalValue;\r\n\r\n // Sincronizar valor interno con defaultValue cuando cambia\r\n useEffect(() => {\r\n if (!isControlled) {\r\n setInternalValue(defaultValue);\r\n }\r\n }, [defaultValue, isControlled]);\r\n\r\n // Handler para cambio de valor\r\n const handleValueChange = (newValue: number) => {\r\n // Aplicar restricciones de min/max\r\n let clampedValue = newValue;\r\n if (min !== undefined && clampedValue < min) {\r\n clampedValue = min;\r\n }\r\n if (max !== undefined && clampedValue > max) {\r\n clampedValue = max;\r\n }\r\n\r\n // Actualizar estado interno si no está controlado\r\n if (!isControlled) {\r\n setInternalValue(clampedValue);\r\n }\r\n\r\n // Llamar onChange si existe\r\n onChange?.(clampedValue);\r\n };\r\n\r\n // Handlers para botones\r\n const handleDecrement = () => {\r\n if (disabled) return;\r\n handleValueChange(currentValue - 1);\r\n };\r\n\r\n const handleIncrement = () => {\r\n if (disabled) return;\r\n handleValueChange(currentValue + 1);\r\n };\r\n\r\n // Verificar si los botones deben estar deshabilitados\r\n const isDecrementDisabled = disabled || (min !== undefined && currentValue <= min);\r\n const isIncrementDisabled = disabled || (max !== undefined && currentValue >= max);\r\n\r\n // Iconos SVG inline\r\n const MinusIcon = () => (\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M3 8H13\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </svg>\r\n );\r\n\r\n const PlusIcon = () => (\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M8 3V13M3 8H13\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </svg>\r\n );\r\n\r\n // Clases para el estado (usando especificaciones exactas de Figma)\r\n const borderClass = error\r\n ? 'border-error-border dark:border-error-border'\r\n : 'border-border-primary dark:border-dark-border-primary';\r\n\r\n const hoverClass = !disabled && !error\r\n ? 'hover:border-[#f9f9f9] dark:hover:border-[#f9f9f9]'\r\n : '';\r\n\r\n const focusClass = !disabled && !error\r\n ? 'focus-within:border-2 focus-within:border-[#329cff] dark:focus-within:border-[#329cff]'\r\n : '';\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={`flex flex-col gap-2 ${className}`.trim()}\r\n {...props}\r\n >\r\n {/* Label con link opcional */}\r\n {label && (\r\n <div className=\"flex items-center justify-between\">\r\n <label className=\"text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary\">\r\n {label}\r\n </label>\r\n {linkText && (\r\n <button\r\n type=\"button\"\r\n onClick={onLinkClick}\r\n disabled={disabled}\r\n className={`\r\n text-xs leading-4\r\n text-primary-custom-600\r\n hover:underline\r\n dark:text-primary-custom-600\r\n ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}\r\n transition-colors\r\n duration-200\r\n `.trim().replace(/\\s+/g, ' ')}\r\n >\r\n {linkText}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {/* Input con botones */}\r\n <div\r\n className={`\r\n flex\r\n items-center\r\n gap-2\r\n px-3\r\n py-1.5\r\n bg-white\r\n dark:bg-dark-bg-primary\r\n border\r\n ${borderClass}\r\n ${hoverClass}\r\n ${focusClass}\r\n rounded-lg\r\n transition-colors\r\n duration-200\r\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\r\n `.trim().replace(/\\s+/g, ' ')}\r\n >\r\n {/* Botón decrementar */}\r\n <button\r\n type=\"button\"\r\n onClick={handleDecrement}\r\n disabled={isDecrementDisabled}\r\n className={`\r\n flex\r\n items-center\r\n justify-center\r\n w-4\r\n h-4\r\n ${isDecrementDisabled\r\n ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'\r\n : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'\r\n }\r\n transition-colors\r\n duration-200\r\n `.trim().replace(/\\s+/g, ' ')}\r\n aria-label=\"Decrementar\"\r\n >\r\n <MinusIcon />\r\n </button>\r\n\r\n {/* Valor actual */}\r\n <div className=\"flex-1 text-center\">\r\n <span\r\n className={`\r\n text-base leading-6\r\n ${currentValue === 0\r\n ? 'text-content-tertiary dark:text-content-tertiary'\r\n : 'text-content-primary dark:text-dark-content-primary'\r\n }\r\n `.trim().replace(/\\s+/g, ' ')}\r\n >\r\n {currentValue}\r\n </span>\r\n </div>\r\n\r\n {/* Botón incrementar */}\r\n <button\r\n type=\"button\"\r\n onClick={handleIncrement}\r\n disabled={isIncrementDisabled}\r\n className={`\r\n flex\r\n items-center\r\n justify-center\r\n w-4\r\n h-4\r\n ${isIncrementDisabled\r\n ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'\r\n : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'\r\n }\r\n transition-colors\r\n duration-200\r\n `.trim().replace(/\\s+/g, ' ')}\r\n aria-label=\"Incrementar\"\r\n >\r\n <PlusIcon />\r\n </button>\r\n </div>\r\n\r\n {/* Helper text */}\r\n {helperText && (\r\n <p\r\n className={`\r\n text-sm leading-5\r\n ${error\r\n ? 'text-error-content dark:text-error-content'\r\n : 'text-content-tertiary dark:text-content-tertiary'\r\n }\r\n `.trim().replace(/\\s+/g, ' ')}\r\n >\r\n {helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nQuantity.displayName = 'Quantity';\r\n","import React, { createContext, useContext, useEffect, useState } from 'react';\r\n\r\nexport type Theme = 'light' | 'dark';\r\n\r\ninterface ThemeContextType {\r\n theme: Theme;\r\n toggleTheme: () => void;\r\n setTheme: (theme: Theme) => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\ninterface ThemeProviderProps {\r\n children: React.ReactNode;\r\n defaultTheme?: Theme;\r\n}\r\n\r\n/**\r\n * ThemeProvider - Proveedor de contexto para el tema de la aplicación\r\n *\r\n * Maneja el estado del tema (light/dark) y lo persiste en localStorage.\r\n * Aplica la clase 'dark' al elemento HTML root cuando el tema es dark.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ThemeProvider defaultTheme=\"light\">\r\n * <App />\r\n * </ThemeProvider>\r\n * ```\r\n */\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n children,\r\n defaultTheme = 'light'\r\n}) => {\r\n const [theme, setThemeState] = useState<Theme>(() => {\r\n // Intenta obtener el tema del localStorage\r\n if (typeof window !== 'undefined') {\r\n const savedTheme = localStorage.getItem('siesa-ui-theme') as Theme;\r\n return savedTheme || defaultTheme;\r\n }\r\n return defaultTheme;\r\n });\r\n\r\n useEffect(() => {\r\n // Aplica o remueve la clase 'dark' del elemento root\r\n const root = window.document.documentElement;\r\n\r\n if (theme === 'dark') {\r\n root.classList.add('dark');\r\n } else {\r\n root.classList.remove('dark');\r\n }\r\n\r\n // Guarda el tema en localStorage\r\n localStorage.setItem('siesa-ui-theme', theme);\r\n }, [theme]);\r\n\r\n const toggleTheme = () => {\r\n setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));\r\n };\r\n\r\n const setTheme = (newTheme: Theme) => {\r\n setThemeState(newTheme);\r\n };\r\n\r\n return (\r\n <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\n/**\r\n * useTheme - Hook para acceder al contexto del tema\r\n *\r\n * @returns {ThemeContextType} Objeto con el tema actual y funciones para modificarlo\r\n *\r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n * const { theme, toggleTheme } = useTheme();\r\n *\r\n * return (\r\n * <button onClick={toggleTheme}>\r\n * Tema actual: {theme}\r\n * </button>\r\n * );\r\n * }\r\n * ```\r\n */\r\nexport const useTheme = (): ThemeContextType => {\r\n const context = useContext(ThemeContext);\r\n\r\n if (context === undefined) {\r\n throw new Error('useTheme debe ser usado dentro de un ThemeProvider');\r\n }\r\n\r\n return context;\r\n};\r\n"],"names":["jsx","jsxs","Fragment","forwardRef","cloneElement","useRef","useEffect","borderClass","useState","createContext","useContext"],"mappings":"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"}