siesa-ui-kit 1.0.2 → 1.0.4

package/storybook/main.ts

@@ -1,20 +1,20 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    "@chromatic-com/storybook",
-    "@storybook/addon-docs",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-a11y",
-    "@storybook/addon-vitest"
-  ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
-  }
-};
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
 export default config;

package/storybook/preview.tsx

@@ -1,84 +1,84 @@
-import type { Preview } from '@storybook/react-vite';
-import React, { useEffect } from 'react';
-import '../src/index.css';
-
-// Decorador global para manejar el tema en Storybook
-const withTheme = (Story: any, context: any) => {
-  const { theme } = context.globals;
-
-  useEffect(() => {
-    const htmlElement = document.documentElement;
-
-    if (theme === 'dark') {
-      htmlElement.classList.add('dark');
-    } else {
-      htmlElement.classList.remove('dark');
-    }
-  }, [theme]);
-
-  return (
-    <div className="bg-white dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary p-6">
-      <Story />
-    </div>
-  );
-};
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-
-    a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
-      test: 'todo'
-    },
-
-    // Configuración de fondos para las historias
-    backgrounds: {
-      default: 'light',
-      values: [
-        {
-          name: 'light',
-          value: '#ffffff',
-        },
-        {
-          name: 'dark',
-          value: '#000000',
-        },
-      ],
-    },
-
-    // Deshabilitar la cuadrícula de fondo
-    grid: {
-      disable: true,
-    },
-  },
-
-  // Control global de tema
-  globalTypes: {
-    theme: {
-      name: 'Theme',
-      description: 'Global theme for components',
-      defaultValue: 'light',
-      toolbar: {
-        title: 'Theme',
-        icon: 'circlehollow',
-        items: [
-          { value: 'light', icon: 'sun', title: 'Light' },
-          { value: 'dark', icon: 'moon', title: 'Dark' },
-        ],
-        dynamicTitle: true,
-      },
-    },
-  },
-
-  decorators: [withTheme],
-};
-
-export default preview;
+import type { Preview } from '@storybook/react-vite';
+import React, { useEffect } from 'react';
+import '../src/index.css';
+
+// Decorador global para manejar el tema en Storybook
+const withTheme = (Story: any, context: any) => {
+  const { theme } = context.globals;
+
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+
+    if (theme === 'dark') {
+      htmlElement.classList.add('dark');
+    } else {
+      htmlElement.classList.remove('dark');
+    }
+  }, [theme]);
+
+  return (
+    <div className="bg-white dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary p-6">
+      <Story />
+    </div>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    },
+
+    // Configuración de fondos para las historias
+    backgrounds: {
+      default: 'light',
+      values: [
+        {
+          name: 'light',
+          value: '#ffffff',
+        },
+        {
+          name: 'dark',
+          value: '#000000',
+        },
+      ],
+    },
+
+    // Deshabilitar la cuadrícula de fondo
+    grid: {
+      disable: true,
+    },
+  },
+
+  // Control global de tema
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'circlehollow',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  decorators: [withTheme],
+};
+
+export default preview;

package/storybook/vitest.setup.ts

@@ -1,7 +1,7 @@
-import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
-import { setProjectAnnotations } from '@storybook/react-vite';
-import * as projectAnnotations from './preview';
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
 setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/tailwind.config.js

@@ -1,128 +1,128 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: 'class', // Habilita dark mode con clase 'dark' en el elemento raíz
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      // Fuentes
-      fontFamily: {
-        sans: ['SiesaBT', 'Inter', 'sans-serif'],
-      },
-
-      // Colores del Sistema de Diseño Siesa
-      colors: {
-        // Primary Custom Colors (extraído de Figma)
-        'primary-custom': {
-          100: '#dbeefe', // backgroundCustomPrimary - Hover para outline
-          300: '#93d1fd', // borderCustomPrimary - Bordes
-          400: '#60b6fa', // PrimaryCustom/400 - Focus ring
-          500: '#3c9bf6', // PrimaryCustom/500 - Hover para botón default
-          600: '#0e79fd', // contentCustomPrimary - Color principal
-          700: '#0c6ade', // variante más oscura - Active/pressed
-        },
-
-        // Primary Inverse (para usar con bg-, text-, border-)
-        'primary-inverse-content': '#eff8ff',   // contentInverseCustomPrimary
-        'primary-inverse-background': '#0e79fd', // backgroundInverseCustomPrimary
-        'primary-inverse-border': '#3c9bf6',     // borderInverseCustomPrimary
-
-        // System Colors (Light Mode)
-        'content-primary': '#18181b', // contentPrimary
-        'content-secondary': '#a1a1aa', // contentSecondary - Description text
-        'content-tertiary': '#71717a', // contentTertiary - Texto secundario/placeholder
-        'bg-primary': '#ffffff', // backgroundPrimary
-        'background-secondary': '#f4f4f5', // backgroundSecondary - Fondos disabled
-        'border-primary': '#e4e4e7', // borderPrimary
-        'border-secondary': '#f4f4f5', // borderSecondary - Divider soft
-
-        // Error Colors
-        'error-border': '#ef4444', // Error border - Red 500
-        'error-content': '#dc2626', // Error text - Red 600
-        'error-bg': '#fef2f2', // Error background - Red 50
-
-        // Extensions Colors (para badges, notificaciones, etc)
-        'content-extensions-red': '#b91c1c', // contentRed - Red 700 para notificaciones
-
-        // Dark Mode Colors (extraído de Figma node 4001-17241)
-        'dark-bg-primary': '#18181b', // backgroundPrimary - Fondo principal oscuro (zinc-900)
-        'dark-bg-custom': '#112d57', // backgroundCustomPrimary - Fondo activo en dark mode
-        'dark-content-primary': '#f4f4f5', // contentPrimary - Texto principal en dark mode (zinc-100)
-        'dark-content-custom': '#93d1fd', // contentCustomPrimary - Texto activo en dark mode
-        'dark-border-primary': '#71717a', // borderPrimary - Bordes en dark
-        'dark-border-custom': '#0f6ae3', // borderCustomPrimary - Bordes de componentes
-        'dark-bg-inverse': '#bfe2fe', // backgroundInverseCustomPrimary - Fondos inversos (botón dark)
-        'dark-content-inverse': '#0e79fd', // contentInverseCustomPrimary - Texto inverso (botón dark)
-        'dark-border-inverse': '#93d1fd', // borderInverseCustomPrimary - Borde botón en dark
-      },
-
-      // Background colors adicionales para hover
-      backgroundColor: {
-        'hover-overlay': 'rgba(0, 0, 0, 0.1)', // Light mode hover overlay
-        'hover-overlay-inverse': 'rgba(255, 255, 255, 0.2)', // Inverse hover
-        'hover-overlay-dark': 'rgba(255, 255, 255, 0.2)', // Dark mode hover overlay (20% white)
-      },
-
-      // Text colors adicionales
-      textColor: {
-        'primary-inverse-content': '#eff8ff',
-        'primary-custom-600': '#0e79fd',
-      },
-
-      // Border colors adicionales
-      borderColor: {
-        'primary-inverse-border': '#3c9bf6',
-        'primary-custom-300': '#93d1fd',
-      },
-
-      // Tipografía completa del sistema de diseño (typography.md)
-      fontSize: {
-        // Display - Para heros y títulos muy grandes
-        '9xl': ['8rem', { lineHeight: '8rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 128px
-        '8xl': ['6rem', { lineHeight: '6rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 96px
-        '7xl': ['4.5rem', { lineHeight: '4.5rem', letterSpacing: '-0.025em', fontWeight: '700' }],   // 72px
-        '6xl': ['3.75rem', { lineHeight: '3.75rem', letterSpacing: '-0.025em', fontWeight: '700' }], // 60px
-        '5xl': ['3rem', { lineHeight: '3rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 48px
-
-        // Heading - Para títulos de secciones
-        '4xl': ['2.25rem', { lineHeight: '2.5rem', letterSpacing: '-0.025em', fontWeight: '700' }],    // 36px
-        '3xl': ['1.875rem', { lineHeight: '2.25rem', letterSpacing: '-0.025em', fontWeight: '700' }],  // 30px
-        '2xl': ['1.5rem', { lineHeight: '2rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 24px
-        'xl': ['1.25rem', { lineHeight: '1.75rem', letterSpacing: '-0.025em', fontWeight: '700' }],    // 20px
-
-        // Label & Paragraph - Para contenido y labels
-        'lg': ['1.125rem', { lineHeight: '1.75rem' }],  // 18px
-        'base': ['1rem', { lineHeight: '1.5rem' }],     // 16px (default)
-        'sm': ['0.875rem', { lineHeight: '1.25rem' }],  // 14px
-        'xs': ['0.75rem', { lineHeight: '1rem' }],      // 12px
-      },
-
-      // Border Radius (valores exactos de Figma)
-      borderRadius: {
-        'md': '6px',   // rounded-md de Figma
-        '2xl': '16px', // rounded-2xl de Figma
-        '3xl': '24px', // rounded-3xl de Figma
-      },
-
-      // Letter Spacing (typography.md)
-      letterSpacing: {
-        'tighter': '-0.025em', // -2.5% usado en Display y Heading
-      },
-
-      // Espaciado personalizado (alineado con Figma)
-      spacing: {
-        '1.5': '6px',   // spacing/1.5
-        '2.5': '10px',  // spacing/2.5
-      },
-
-      // Sombras personalizadas
-      boxShadow: {
-        'button-inset': '0px 2px 0px 0px inset rgba(255,255,255,0.15)',
-        'menu': '0px 4px 4px -1px rgba(12, 12, 13, 0.05), 0px 4px 4px -1px rgba(12, 12, 13, 0.1)',
-      },
-    },
-  },
-  plugins: [],
-}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class', // Habilita dark mode con clase 'dark' en el elemento raíz
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      // Fuentes
+      fontFamily: {
+        sans: ['SiesaBT', 'Inter', 'sans-serif'],
+      },
+
+      // Colores del Sistema de Diseño Siesa
+      colors: {
+        // Primary Custom Colors (extraído de Figma)
+        'primary-custom': {
+          100: '#dbeefe', // backgroundCustomPrimary - Hover para outline
+          300: '#93d1fd', // borderCustomPrimary - Bordes
+          400: '#60b6fa', // PrimaryCustom/400 - Focus ring
+          500: '#3c9bf6', // PrimaryCustom/500 - Hover para botón default
+          600: '#0e79fd', // contentCustomPrimary - Color principal
+          700: '#0c6ade', // variante más oscura - Active/pressed
+        },
+
+        // Primary Inverse (para usar con bg-, text-, border-)
+        'primary-inverse-content': '#eff8ff',   // contentInverseCustomPrimary
+        'primary-inverse-background': '#0e79fd', // backgroundInverseCustomPrimary
+        'primary-inverse-border': '#3c9bf6',     // borderInverseCustomPrimary
+
+        // System Colors (Light Mode)
+        'content-primary': '#18181b', // contentPrimary
+        'content-secondary': '#a1a1aa', // contentSecondary - Description text
+        'content-tertiary': '#71717a', // contentTertiary - Texto secundario/placeholder
+        'bg-primary': '#ffffff', // backgroundPrimary
+        'background-secondary': '#f4f4f5', // backgroundSecondary - Fondos disabled
+        'border-primary': '#e4e4e7', // borderPrimary
+        'border-secondary': '#f4f4f5', // borderSecondary - Divider soft
+
+        // Error Colors
+        'error-border': '#ef4444', // Error border - Red 500
+        'error-content': '#dc2626', // Error text - Red 600
+        'error-bg': '#fef2f2', // Error background - Red 50
+
+        // Extensions Colors (para badges, notificaciones, etc)
+        'content-extensions-red': '#b91c1c', // contentRed - Red 700 para notificaciones
+
+        // Dark Mode Colors (extraído de Figma node 4001-17241)
+        'dark-bg-primary': '#18181b', // backgroundPrimary - Fondo principal oscuro (zinc-900)
+        'dark-bg-custom': '#112d57', // backgroundCustomPrimary - Fondo activo en dark mode
+        'dark-content-primary': '#f4f4f5', // contentPrimary - Texto principal en dark mode (zinc-100)
+        'dark-content-custom': '#93d1fd', // contentCustomPrimary - Texto activo en dark mode
+        'dark-border-primary': '#71717a', // borderPrimary - Bordes en dark
+        'dark-border-custom': '#0f6ae3', // borderCustomPrimary - Bordes de componentes
+        'dark-bg-inverse': '#bfe2fe', // backgroundInverseCustomPrimary - Fondos inversos (botón dark)
+        'dark-content-inverse': '#0e79fd', // contentInverseCustomPrimary - Texto inverso (botón dark)
+        'dark-border-inverse': '#93d1fd', // borderInverseCustomPrimary - Borde botón en dark
+      },
+
+      // Background colors adicionales para hover
+      backgroundColor: {
+        'hover-overlay': 'rgba(0, 0, 0, 0.1)', // Light mode hover overlay
+        'hover-overlay-inverse': 'rgba(255, 255, 255, 0.2)', // Inverse hover
+        'hover-overlay-dark': 'rgba(255, 255, 255, 0.2)', // Dark mode hover overlay (20% white)
+      },
+
+      // Text colors adicionales
+      textColor: {
+        'primary-inverse-content': '#eff8ff',
+        'primary-custom-600': '#0e79fd',
+      },
+
+      // Border colors adicionales
+      borderColor: {
+        'primary-inverse-border': '#3c9bf6',
+        'primary-custom-300': '#93d1fd',
+      },
+
+      // Tipografía completa del sistema de diseño (typography.md)
+      fontSize: {
+        // Display - Para heros y títulos muy grandes
+        '9xl': ['8rem', { lineHeight: '8rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 128px
+        '8xl': ['6rem', { lineHeight: '6rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 96px
+        '7xl': ['4.5rem', { lineHeight: '4.5rem', letterSpacing: '-0.025em', fontWeight: '700' }],   // 72px
+        '6xl': ['3.75rem', { lineHeight: '3.75rem', letterSpacing: '-0.025em', fontWeight: '700' }], // 60px
+        '5xl': ['3rem', { lineHeight: '3rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 48px
+
+        // Heading - Para títulos de secciones
+        '4xl': ['2.25rem', { lineHeight: '2.5rem', letterSpacing: '-0.025em', fontWeight: '700' }],    // 36px
+        '3xl': ['1.875rem', { lineHeight: '2.25rem', letterSpacing: '-0.025em', fontWeight: '700' }],  // 30px
+        '2xl': ['1.5rem', { lineHeight: '2rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 24px
+        'xl': ['1.25rem', { lineHeight: '1.75rem', letterSpacing: '-0.025em', fontWeight: '700' }],    // 20px
+
+        // Label & Paragraph - Para contenido y labels
+        'lg': ['1.125rem', { lineHeight: '1.75rem' }],  // 18px
+        'base': ['1rem', { lineHeight: '1.5rem' }],     // 16px (default)
+        'sm': ['0.875rem', { lineHeight: '1.25rem' }],  // 14px
+        'xs': ['0.75rem', { lineHeight: '1rem' }],      // 12px
+      },
+
+      // Border Radius (valores exactos de Figma)
+      borderRadius: {
+        'md': '6px',   // rounded-md de Figma
+        '2xl': '16px', // rounded-2xl de Figma
+        '3xl': '24px', // rounded-3xl de Figma
+      },
+
+      // Letter Spacing (typography.md)
+      letterSpacing: {
+        'tighter': '-0.025em', // -2.5% usado en Display y Heading
+      },
+
+      // Espaciado personalizado (alineado con Figma)
+      spacing: {
+        '1.5': '6px',   // spacing/1.5
+        '2.5': '10px',  // spacing/2.5
+      },
+
+      // Sombras personalizadas
+      boxShadow: {
+        'button-inset': '0px 2px 0px 0px inset rgba(255,255,255,0.15)',
+        'menu': '0px 4px 4px -1px rgba(12, 12, 13, 0.05), 0px 4px 4px -1px rgba(12, 12, 13, 0.1)',
+      },
+    },
+  },
+  plugins: [],
+}