siesa-ui-kit 1.0.3 → 1.0.4

package/src/components/DropdownItemHeading/icons.tsx

@@ -0,0 +1,125 @@
+/**
+ * Iconos para el componente DropdownItemHeading
+ * Usando heroicons-micro según especificaciones de Figma
+ * 
+ * Los iconos se pueden pasar como strings al componente:
+ * - 'cog-6-tooth': Icono de engranaje
+ * - 'check': Icono de check
+ * - 'x': Icono de cerrar
+ * - 'chevron-down': Icono de chevron hacia abajo
+ * 
+ * @see DropdownItemHeading.tsx para ver cómo se usan
+ */
+
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+}
+
+/**
+ * Icono Cog (heroicons-micro/cog-6-tooth)
+ * Usado como icono por defecto en DropdownItemHeading
+ * Tamaño: 16x16px
+ */
+export const CogIcon = ({ className = 'w-4 h-4' }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className={className}
+  >
+    <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.461 3.39a.5.5 0 0 1 .639-.206l1.703.768c.433-.36.928-.649 1.466-.847l.186-1.858ZM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono Check (heroicons-micro/check)
+ */
+export const CheckIcon = ({ className = 'w-4 h-4' }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 1 1-1.06-1.06L12.69 4.22a.75.75 0 0 1 1.06 0Z"
+      clipRule="evenodd"
+    />
+    <path
+      fillRule="evenodd"
+      d="M2.22 9.28a.75.75 0 0 0 0 1.06l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.5-2.5a.75.75 0 0 0-1.06 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono X (heroicons-micro/x-mark)
+ */
+export const XIcon = ({ className = 'w-4 h-4' }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className={className}
+  >
+    <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>
+);
+
+/**
+ * Icono ChevronDown (heroicons-micro/chevron-down)
+ */
+export const ChevronDownIcon = ({ className = 'w-4 h-4' }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Mapeo de nombres de iconos a componentes
+ * Permite usar strings para referenciar iconos
+ */
+export const iconMap: Record<string, React.FC<IconProps>> = {
+  'cog-6-tooth': CogIcon,
+  'check': CheckIcon,
+  'x': XIcon,
+  'chevron-down': ChevronDownIcon,
+};
+
+/**
+ * Obtener un icono por su nombre
+ * @param iconName - Nombre del icono (ej: 'cog-6-tooth', 'check', 'x', 'chevron-down')
+ * @param className - Clases CSS adicionales
+ * @returns Componente del icono o null si no existe
+ */
+export const getIcon = (
+  iconName: string | null | undefined,
+  className?: string
+): React.ReactNode => {
+  if (!iconName) return null;
+
+  const IconComponent = iconMap[iconName];
+  if (!IconComponent) {
+    console.warn(`Icon "${iconName}" not found in iconMap`);
+    return null;
+  }
+
+  return <IconComponent className={className} />;
+};

package/src/components/DropdownItemHeading/index.ts

@@ -0,0 +1,3 @@
+export { DropdownItemHeading } from './DropdownItemHeading';
+export type { DropdownItemHeadingProps } from './DropdownItemHeading.types';
+export { CogIcon, CheckIcon, XIcon, ChevronDownIcon, getIcon, iconMap } from './icons';