siesa-ui-kit 1.0.3 → 1.0.5

package/src/views/TableLayoutView/icons.tsx

@@ -0,0 +1,113 @@
+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

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

package/storybook/main.ts

@@ -0,0 +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": {}
+  }
+};
+export default config;

package/storybook/preview.tsx

@@ -0,0 +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;

package/storybook/vitest.setup.ts

@@ -0,0 +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
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/tailwind.config.js

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

package/dist/ButtonTest.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-/**
- * Página de prueba para el componente Button
- */
-export declare const ButtonTest: React.FC;
-//# sourceMappingURL=ButtonTest.d.ts.map

package/dist/ButtonTest.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonTest.d.ts","sourceRoot":"","sources":["../src/ButtonTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EA4I9B,CAAC"}

package/dist/components/Alert/Alert.d.ts

@@ -1,23 +0,0 @@
-import type { AlertProps } from './Alert.types';
-/**
- * Alert - Componente de alerta/diálogo del sistema de diseño Siesa
- *
- * Componente modal para confirmaciones con soporte para:
- * - Título y descripción
- * - Contenido personalizado (children)
- * - Botones de acción personalizados o por defecto
- * - Dark mode
- *
- * @example
- * ```tsx
- * <Alert
- *   title="Are you sure you want to refund this payment?"
- *   description="The refund will be reflected in 2 to 3 business days."
- *   onCancel={() => console.log('Cancelled')}
- *   onConfirm={() => console.log('Confirmed')}
- *   confirmText="Refund"
- * />
- * ```
- */
-export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert/Alert.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,uGA+EjB,CAAC"}

package/dist/components/Alert/Alert.types.d.ts

@@ -1,46 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-/**
- * Props del componente Alert
- */
-export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Título del alert (texto principal en negrita)
-     */
-    title: string;
-    /**
-     * Descripción opcional (texto secundario)
-     */
-    description?: string;
-    /**
-     * Contenido opcional del body (por ejemplo, input, placeholder, etc.)
-     */
-    children?: ReactNode;
-    /**
-     * Botones de acción personalizados
-     * Si no se proveen, se mostrarán los botones por defecto (Cancel/Confirm)
-     */
-    actions?: ReactNode;
-    /**
-     * Callback cuando se hace click en Cancel
-     */
-    onCancel?: () => void;
-    /**
-     * Callback cuando se hace click en Confirm
-     */
-    onConfirm?: () => void;
-    /**
-     * Texto del botón de cancelar
-     * @default "Cancelar"
-     */
-    cancelText?: string;
-    /**
-     * Texto del botón de confirmar
-     * @default "Confirmar"
-     */
-    confirmText?: string;
-    /**
-     * Clases CSS adicionales
-     */
-    className?: string;
-}
-//# sourceMappingURL=Alert.types.d.ts.map

package/dist/components/Alert/Alert.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/Avatar/Avatar.d.ts

@@ -1,41 +0,0 @@
-import type { AvatarProps } from './Avatar.types';
-/**
- * Avatar - Componente de avatar del sistema de diseño Siesa
- *
- * Componente para mostrar imágenes de usuario o iniciales con soporte para:
- * - Tamaños: 4 (20px), 6 (24px), 8 (32px), 10 (40px)
- * - Tipos: circular (completamente redondo) y rounded (esquinas redondeadas)
- * - Imagen o iniciales
- * - Dark mode completo
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Tipografía adaptativa según tamaño
- * - Type safety con TypeScript estricto
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * // Con imagen
- * <Avatar
- *   src="/path/to/image.jpg"
- *   alt="John Doe"
- *   size="10"
- *   type="circular"
- * />
- *
- * // Con iniciales
- * <Avatar
- *   initials="JD"
- *   size="10"
- *   type="circular"
- * />
- * ```
- */
-export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,MAAM,wGAmGlB,CAAC"}

package/dist/components/Avatar/Avatar.types.d.ts

@@ -1,46 +0,0 @@
-import type { ImgHTMLAttributes } from 'react';
-/**
- * Tamaños del Avatar
- * Basado en el sistema de espaciado de Siesa
- */
-export type AvatarSize = '4' | '6' | '8' | '10';
-/**
- * Tipo de forma del Avatar
- */
-export type AvatarType = 'circular' | 'rounded';
-/**
- * Props del componente Avatar
- */
-export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'size'> {
-    /**
-     * Tamaño del avatar
-     * - 4: 20px
-     * - 6: 24px
-     * - 8: 32px
-     * - 10: 40px
-     * @default '10'
-     */
-    size?: AvatarSize;
-    /**
-     * Tipo de forma del avatar
-     * @default 'circular'
-     */
-    type?: AvatarType;
-    /**
-     * URL de la imagen del avatar
-     */
-    src?: string;
-    /**
-     * Texto alternativo para la imagen
-     */
-    alt?: string;
-    /**
-     * Iniciales a mostrar cuando no hay imagen
-     */
-    initials?: string;
-    /**
-     * Clases CSS adicionales
-     */
-    className?: string;
-}
-//# sourceMappingURL=Avatar.types.d.ts.map

package/dist/components/Avatar/Avatar.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACpF;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/Badge/Badge.d.ts

@@ -1,42 +0,0 @@
-import type { BadgeProps } from './Badge.types';
-/**
- * Badge del sistema de diseño Siesa
- *
- * Componente para mostrar etiquetas con múltiples variantes de color.
- * Los badges mantienen sus colores vibrantes en light y dark mode para
- * garantizar visibilidad y consistencia visual.
- *
- * Características implementadas:
- * - 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)
- * - Icono opcional a la izquierda (12x12px)
- * - Contador/notification badge opcional
- * - Estados hover con transiciones suaves
- * - Los colores se mantienen vibrantes en dark mode (según diseño Figma)
- * - Tipografía: Label Tiny (12px Bold)
- *
- * Mejores prácticas implementadas:
- * - Tokens de color de Tailwind estándar para badges
- * - Font-family explícita (SiesaBT via font-sans)
- * - Transiciones suaves (duration-200)
- * - Estructura clara y mantenible
- *
- * @see docs/typography.md - Sistema tipográfico (Label Tiny)
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4130-9382
- *
- * @example
- * ```tsx
- * // Badge simple
- * <Badge color="blue" label="Label" />
- *
- * // Badge con icono
- * <Badge color="green" label="Success" leftIcon={<CheckIcon />} />
- *
- * // Badge con contador
- * <Badge color="red" label="Errors" count={5} />
- *
- * // Badge completo
- * <Badge color="primary" label="Messages" leftIcon={<MailIcon />} count={12} />
- * ```
- */
-export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,eAAe,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,KAAK,uGAyOjB,CAAC"}

package/dist/components/Badge/Badge.types.d.ts

@@ -1,32 +0,0 @@
-import type { HTMLAttributes, ReactElement } from 'react';
-/**
- * Variantes de color del Badge
- */
-export type BadgeColor = 'zinc' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'primary' | 'secondary' | 'tertiary';
-/**
- * Props del componente Badge
- */
-export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Color del badge
-     * @default 'zinc'
-     */
-    color?: BadgeColor;
-    /**
-     * Icono opcional a la izquierda
-     */
-    leftIcon?: ReactElement;
-    /**
-     * Texto del badge
-     */
-    label: string;
-    /**
-     * Número para el notification badge (opcional)
-     */
-    count?: number;
-    /**
-     * Clases CSS adicionales
-     */
-    className?: string;
-}
-//# sourceMappingURL=Badge.types.d.ts.map

package/dist/components/Badge/Badge.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,KAAK,GACL,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,GACX,UAAU,CAAC;AAEf;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}