siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Tabs/Tabs.types.ts

@@ -1,127 +1,127 @@
-import type { ReactNode } from 'react';
-
-/**
- * Configuración de un item de Tab individual
- */
-export interface TabItem {
-  /**
-   * Identificador único del tab
-   */
-  id: string;
-
-  /**
-   * Texto a mostrar en el tab
-   */
-  label: string;
-
-  /**
-   * Icono a mostrar a la izquierda del texto (opcional)
-   */
-  icon?: ReactNode;
-
-  /**
-   * Número de notificaciones a mostrar en el badge (opcional)
-   */
-  badge?: number;
-
-  /**
-   * Si el tab está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-}
-
-/**
- * Props del componente Tab individual (interno)
- */
-export interface TabProps {
-  /**
-   * Texto a mostrar en el tab
-   */
-  label: string;
-
-  /**
-   * Si el tab está activo/seleccionado
-   * @default false
-   */
-  active?: boolean;
-
-  /**
-   * Icono a mostrar a la izquierda del texto (opcional)
-   */
-  icon?: ReactNode;
-
-  /**
-   * Número de notificaciones a mostrar en el badge (opcional)
-   */
-  badge?: number;
-
-  /**
-   * Si el tab está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Función callback ejecutada al hacer click
-   */
-  onClick?: () => void;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-
-  /**
-   * Etiqueta accesible para lectores de pantalla
-   */
-  ariaLabel?: string;
-}
-
-/**
- * Props del componente Tabs (contenedor)
- */
-export interface TabsProps {
-  /**
-   * Lista de tabs a mostrar
-   */
-  items: TabItem[];
-
-  /**
-   * ID del tab actualmente seleccionado
-   */
-  activeId?: string;
-
-  /**
-   * ID del tab seleccionado por defecto (para componente no controlado)
-   */
-  defaultActiveId?: string;
-
-  /**
-   * Callback ejecutado cuando cambia el tab seleccionado
-   */
-  onChange?: (id: string) => void;
-
-  /**
-   * Clases CSS adicionales para el contenedor
-   */
-  className?: string;
-
-  /**
-   * Si los tabs deben ocupar todo el ancho disponible
-   * @default false
-   */
-  fullWidth?: boolean;
-
-  /**
-   * Tamaño de los tabs
-   * @default 'base'
-   */
-  size?: 'sm' | 'base' | 'lg';
-
-  /**
-   * Si se muestra la línea inferior del contenedor de tabs
-   * @default true
-   */
-  showBorder?: boolean;
-}
+import type { ReactNode } from 'react';
+
+/**
+ * Configuración de un item de Tab individual
+ */
+export interface TabItem {
+  /**
+   * Identificador único del tab
+   */
+  id: string;
+
+  /**
+   * Texto a mostrar en el tab
+   */
+  label: string;
+
+  /**
+   * Icono a mostrar a la izquierda del texto (opcional)
+   */
+  icon?: ReactNode;
+
+  /**
+   * Número de notificaciones a mostrar en el badge (opcional)
+   */
+  badge?: number;
+
+  /**
+   * Si el tab está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Props del componente Tab individual (interno)
+ */
+export interface TabProps {
+  /**
+   * Texto a mostrar en el tab
+   */
+  label: string;
+
+  /**
+   * Si el tab está activo/seleccionado
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Icono a mostrar a la izquierda del texto (opcional)
+   */
+  icon?: ReactNode;
+
+  /**
+   * Número de notificaciones a mostrar en el badge (opcional)
+   */
+  badge?: number;
+
+  /**
+   * Si el tab está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Función callback ejecutada al hacer click
+   */
+  onClick?: () => void;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Etiqueta accesible para lectores de pantalla
+   */
+  ariaLabel?: string;
+}
+
+/**
+ * Props del componente Tabs (contenedor)
+ */
+export interface TabsProps {
+  /**
+   * Lista de tabs a mostrar
+   */
+  items: TabItem[];
+
+  /**
+   * ID del tab actualmente seleccionado
+   */
+  activeId?: string;
+
+  /**
+   * ID del tab seleccionado por defecto (para componente no controlado)
+   */
+  defaultActiveId?: string;
+
+  /**
+   * Callback ejecutado cuando cambia el tab seleccionado
+   */
+  onChange?: (id: string) => void;
+
+  /**
+   * Clases CSS adicionales para el contenedor
+   */
+  className?: string;
+
+  /**
+   * Si los tabs deben ocupar todo el ancho disponible
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Tamaño de los tabs
+   * @default 'base'
+   */
+  size?: 'sm' | 'base' | 'lg';
+
+  /**
+   * Si se muestra la línea inferior del contenedor de tabs
+   * @default true
+   */
+  showBorder?: boolean;
+}

package/src/components/Tabs/icons.tsx

@@ -1,129 +1,129 @@
-import React from 'react';
-
-/**
- * Icono de check (Heroicons Micro 16x16)
- * Usado como icono de ejemplo en los tabs
- */
-export const CheckIcon: 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="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Icono de inicio/home (Heroicons Micro 16x16)
- */
-export const HomeIcon: 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.543 2.232a.75.75 0 0 0-1.085 0l-5.25 5.5A.75.75 0 0 0 2.75 9H4v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 1 1 2 0v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V9h1.25a.75.75 0 0 0 .543-1.268l-5.25-5.5Z"
-    />
-  </svg>
-);
-
-/**
- * Icono de usuario (Heroicons Micro 16x16)
- */
-export const UserIcon: 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 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
-    />
-  </svg>
-);
-
-/**
- * Icono de configuración/engranaje (Heroicons Micro 16x16)
- */
-export const CogIcon: 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="M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.46 3.593a.5.5 0 0 1 .639-.206l1.703.769c.433-.36.928-.65 1.466-.848l.186-1.858ZM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Icono de campana/notificaciones (Heroicons Micro 16x16)
- */
-export const BellIcon: 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="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.294.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-4 9a1 1 0 0 1-1-1h2a1 1 0 0 1-1 1Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Icono de documento (Heroicons Micro 16x16)
- */
-export const DocumentIcon: 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="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm1 5.75A.75.75 0 0 1 5.75 7h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 5 7.75Zm0 3a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Icono de gráfico/estadísticas (Heroicons Micro 16x16)
- */
-export const ChartIcon: 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="M13 6.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5ZM10 4a.5.5 0 0 1 .5.5v7.5a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 10 4ZM7 8a.5.5 0 0 1 .5.5V12a.5.5 0 0 1-1 0V8.5A.5.5 0 0 1 7 8ZM4 10.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5Z"
-    />
-  </svg>
-);
+import React from 'react';
+
+/**
+ * Icono de check (Heroicons Micro 16x16)
+ * Usado como icono de ejemplo en los tabs
+ */
+export const CheckIcon: 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="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de inicio/home (Heroicons Micro 16x16)
+ */
+export const HomeIcon: 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.543 2.232a.75.75 0 0 0-1.085 0l-5.25 5.5A.75.75 0 0 0 2.75 9H4v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 1 1 2 0v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V9h1.25a.75.75 0 0 0 .543-1.268l-5.25-5.5Z"
+    />
+  </svg>
+);
+
+/**
+ * Icono de usuario (Heroicons Micro 16x16)
+ */
+export const UserIcon: 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 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
+    />
+  </svg>
+);
+
+/**
+ * Icono de configuración/engranaje (Heroicons Micro 16x16)
+ */
+export const CogIcon: 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="M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.46 3.593a.5.5 0 0 1 .639-.206l1.703.769c.433-.36.928-.65 1.466-.848l.186-1.858ZM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de campana/notificaciones (Heroicons Micro 16x16)
+ */
+export const BellIcon: 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="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.294.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-4 9a1 1 0 0 1-1-1h2a1 1 0 0 1-1 1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de documento (Heroicons Micro 16x16)
+ */
+export const DocumentIcon: 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="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm1 5.75A.75.75 0 0 1 5.75 7h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 5 7.75Zm0 3a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de gráfico/estadísticas (Heroicons Micro 16x16)
+ */
+export const ChartIcon: 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="M13 6.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5ZM10 4a.5.5 0 0 1 .5.5v7.5a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 10 4ZM7 8a.5.5 0 0 1 .5.5V12a.5.5 0 0 1-1 0V8.5A.5.5 0 0 1 7 8ZM4 10.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5Z"
+    />
+  </svg>
+);

package/src/components/Tabs/index.ts

@@ -1,11 +1,11 @@
-export { Tabs, Tab } from './Tabs';
-export type { TabsProps, TabProps, TabItem } from './Tabs.types';
-export {
-  CheckIcon,
-  HomeIcon,
-  UserIcon,
-  CogIcon,
-  BellIcon,
-  DocumentIcon,
-  ChartIcon,
-} from './icons';
+export { Tabs, Tab } from './Tabs';
+export type { TabsProps, TabProps, TabItem } from './Tabs.types';
+export {
+  CheckIcon,
+  HomeIcon,
+  UserIcon,
+  CogIcon,
+  BellIcon,
+  DocumentIcon,
+  ChartIcon,
+} from './icons';