siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/NavigationRailTypes/icons.tsx

@@ -1,141 +1,76 @@
-import React from 'react';
-
-/**
- * Icono Chevron Right (apunta hacia la derecha)
- * Usado en el botón de collapse
- * Tamaño recomendado: 16x16px
- */
-export const ChevronRightIcon: React.FC<{ className?: string }> = ({ className = 'size-4' }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={className}
-  >
-    <polyline points="9 18 15 12 9 6"></polyline>
-  </svg>
-);
-
-/**
- * Icono Chevron Left (apunta hacia la izquierda)
- * Usado en el botón de expand
- * Tamaño recomendado: 16x16px
- */
-export const ChevronLeftIcon: React.FC<{ className?: string }> = ({ className = 'size-4' }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={className}
-  >
-    <polyline points="15 18 9 12 15 6"></polyline>
-  </svg>
-);
-
-/**
- * Icono Clock (reloj)
- * Usado en el botón "Recientes"
- * Tamaño recomendado: 16x16px
- */
-export const ClockIcon: React.FC<{ className?: string }> = ({ className = 'size-4' }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={className}
-  >
-    <circle cx="12" cy="12" r="10"></circle>
-    <polyline points="12 6 12 12 16 14"></polyline>
-  </svg>
-);
-
-/**
- * Icono Magnifying Glass (búsqueda)
- * Usado en el botón de búsqueda
- * Tamaño recomendado: 16x16px
- */
-export const MagnifyingGlassIcon: React.FC<{ className?: string }> = ({ className = 'size-4' }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={className}
-  >
-    <circle cx="11" cy="11" r="8"></circle>
-    <path d="m21 21-4.35-4.35"></path>
-  </svg>
-);
-
-/**
- * Icono Home
- * Ejemplo para items de navegación
- * Tamaño recomendado: 16x16px
- */
-export const HomeIcon: React.FC<{ className?: string }> = ({ className = 'size-4' }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={className}
-  >
-    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-    <polyline points="9 22 9 12 15 12 15 22"></polyline>
-  </svg>
-);
-
-/**
- * Icono Users
- * Ejemplo para items de navegación
- * Tamaño recomendado: 16x16px
- */
-export const UsersIcon: React.FC<{ className?: string }> = ({ className = 'size-4' }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={className}
-  >
-    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-    <circle cx="9" cy="7" r="4"></circle>
-    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
-    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-  </svg>
-);
-
-/**
- * Icono Settings
- * Ejemplo para items de navegación
- * Tamaño recomendado: 16x16px
- */
-export const SettingsIcon: React.FC<{ className?: string }> = ({ className = 'size-4' }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={className}
-  >
-    <circle cx="12" cy="12" r="3"></circle>
-    <path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m3.08 3.08l4.24 4.24M1 12h6m6 0h6m-2.78-7.78l-4.24 4.24m-3.08 3.08l-4.24 4.24"></path>
-  </svg>
-);
+import React from 'react';
+// Importamos de 24/outline solo para el ClockIcon
+import { ClockIcon as HeroClockOutline } from '@heroicons/react/24/outline';
+
+// Importamos de 20/solid para los demás
+import {
+  ChevronRightIcon as HeroChevronRight,
+  ChevronLeftIcon as HeroChevronLeft,
+  MagnifyingGlassIcon as HeroSearch,
+  HomeIcon as HeroHome,
+  UsersIcon as HeroUsers,
+  Cog6ToothIcon as HeroSettings,
+} from '@heroicons/react/20/solid';
+
+/**
+ * Props comunes para los iconos
+ */
+interface IconProps {
+  className?: string;
+}
+
+/**
+ * Icono Chevron Right (apunta hacia la derecha)
+ * Usado en el botón de collapse
+ */
+export const ChevronRightIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroChevronRight className={className} aria-hidden="true" />
+);
+
+/**
+ * Icono Chevron Left (apunta hacia la izquierda)
+ * Usado en el botón de expand
+ */
+export const ChevronLeftIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroChevronLeft className={className} aria-hidden="true" />
+);
+
+/**
+ * Icono Clock (reloj) - Estilo OUTLINE 24
+ * Usado en el botón "Recientes"
+ */
+export const ClockIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroClockOutline className={className} aria-hidden="true" />
+);
+
+/**
+ * Icono Magnifying Glass (búsqueda)
+ * Usado en el botón de búsqueda
+ */
+export const MagnifyingGlassIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroSearch className={className} aria-hidden="true" />
+);
+
+/**
+ * Icono Home
+ * Ejemplo para items de navegación
+ */
+export const HomeIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroHome className={className} aria-hidden="true" />
+);
+
+/**
+ * Icono Users
+ * Ejemplo para items de navegación
+ */
+export const UsersIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroUsers className={className} aria-hidden="true" />
+);
+
+/**
+ * Icono Settings
+ * Ejemplo para items de navegación
+ */
+export const SettingsIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroSettings className={className} aria-hidden="true" />
+);

package/src/components/NavigationRailTypes/index.ts

@@ -1,7 +1,7 @@
-export { NavigationRailTypes } from './NavigationRailTypes';
-export { default } from './NavigationRailTypes';
-export type {
-  NavigationRailTypesProps,
-  NavigationRailItem,
-  NavigationRailCollapsibleItem,
-} from './NavigationRailTypes.types';
+export { NavigationRailTypes } from './NavigationRailTypes';
+export { default } from './NavigationRailTypes';
+export type {
+  NavigationRailTypesProps,
+  NavigationRailItem,
+  NavigationRailCollapsibleItem,
+} from './NavigationRailTypes.types';