siesa-ui-kit 1.0.0 → 1.0.1

package/src/views/TableLayoutView/icons.tsx

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

package/src/views/TableLayoutView/index.ts

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

package/storybook/main.ts

@@ -1,20 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-/** @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: [],
-}