siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/DropdownItemHeading/DropdownItemHeading.tsx

@@ -1,216 +1,216 @@
-import React from 'react';
-import type { DropdownItemHeadingProps } from './DropdownItemHeading.types';
-import { getIcon } from './icons';
-
-/**
- * Componente DropdownItemHeading del sistema de diseño Siesa
- *
- * Implementación pixel-perfect basada en Figma (node 6135:32539)
- * para encabezados en menús dropdown con icono, label, descripción y acción.
- *
- * **Estructura:**
- * - Icon Wrapper: Opcional, icono de 16x16px
- * - Content Wrapper: Label + Description (flexible)
- * - Action Wrapper: Opcional, texto de acción en la derecha
- *
- * **Dimensiones:**
- * - Altura flexible (contenido vertical)
- * - Width mínimo: 224px
- * - Padding: 8px vertical, 16px horizontal
- * - Border radius: 8px (rounded-lg)
- *
- * **Tipografía:**
- * - Label: Label/Small (14px Bold) - content-primary
- * - Description: Paragraph/Tiny (12px Regular) - content-secondary
- * - Action: Paragraph/XXSmall (10px Regular) - content-secondary
- *
- * **Dark Mode:**
- * - Label: #18181b (light) → #bfe2fe (dark)
- * - Description: #a1a1aa (light) → #93d1fd (dark)
- * - Icon: #0e79fd (light) → #bfe2fe (dark)
- * - Action: #a1a1aa (light) → #93d1fd (dark)
- *
- * **Estados:**
- * - Default: Sin hover/focus
- * - Hover: Overlay sutil (managed by parent Dropdown)
- * - Disabled: Opacity 50% (managed by parent Dropdown)
- *
- * **Especificaciones de Figma:**
- * - Gap entre elementos: 12px
- * - Gap entre label y description: 2px
- * - Rounded: 8px (rounded-lg)
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico (Label/Small, Paragraph/Tiny)
- * @see docs/spacing.md - Sistema de espaciado
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-32539 - Diseño Figma
- *
- * @example
- * ```tsx
- * // Con icono, label, descripción y acción
- * <DropdownItemHeading
- *   label="Settings"
- *   description="Configure your preferences"
- *   showDescription={true}
- *   icon={<SettingsIcon />}
- *   showIcon={true}
- *   actionLabel="Clear"
- *   showAction={true}
- *   onActionClick={handleClear}
- * />
- *
- * // Solo label y descripción (sin icono ni acción)
- * <DropdownItemHeading
- *   label="My Account"
- *   description="user@example.com"
- *   showDescription={true}
- * />
- *
- * // Solo label
- * <DropdownItemHeading
- *   label="Quick Actions"
- *   showDescription={false}
- * />
- * ```
- */
-export const DropdownItemHeading: React.FC<DropdownItemHeadingProps> = ({
-  label = 'Label',
-  description,
-  showDescription = true,
-  iconName = 'cog-6-tooth',
-  showIcon = true,
-  actionLabel,
-  showAction = false,
-  onActionClick,
-  className = '',
-  ...rest
-}) => {
-
-  return (
-    <div
-      className={`
-        flex
-        gap-3
-        items-center
-        px-4
-        py-2
-        rounded-lg
-        w-56
-        ${className}
-      `}
-      data-testid="dropdown-item-heading"
-      {...rest}
-    >
-      {/* ===== ICON WRAPPER ===== */}
-      {showIcon && iconName && (
-        <div
-          className="
-            flex
-            items-center
-            justify-center
-            shrink-0
-            w-4
-            h-4
-          "
-          data-testid="icon-wrapper"
-        >
-          <div className="text-primary-custom-600 dark:text-dark-content-inverse">
-            {getIcon(iconName, 'w-4 h-4')}
-          </div>
-        </div>
-      )}
-
-      {/* ===== CONTENT WRAPPER ===== */}
-      <div
-        className="
-          flex
-          flex-1
-          flex-col
-          gap-0.5
-          items-start
-          justify-center
-          min-w-0
-        "
-        data-testid="content-wrapper"
-      >
-        {/* Label */}
-        <p
-          className="
-            font-bold
-            text-sm
-            leading-5
-            text-content-primary
-            dark:text-dark-content-inverse
-            whitespace-nowrap
-            overflow-hidden
-            text-ellipsis
-          "
-          data-testid="label"
-        >
-          {label}
-        </p>
-
-        {/* Description */}
-        {showDescription && description && (
-          <p
-            className="
-              font-normal
-              text-xs
-              leading-4
-              text-content-secondary
-              dark:text-dark-border-inverse
-              w-full
-              whitespace-pre-wrap
-              overflow-hidden
-              text-ellipsis
-            "
-            data-testid="description"
-          >
-            {description}
-          </p>
-        )}
-      </div>
-
-      {/* ===== ACTION WRAPPER ===== */}
-      {showAction && actionLabel && (
-        <div
-          className="
-            flex
-            items-center
-            justify-center
-            shrink-0
-            cursor-pointer
-            hover:opacity-80
-            transition-opacity
-            duration-150
-          "
-          data-testid="action-wrapper"
-          onClick={onActionClick}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              onActionClick?.(e as any);
-            }
-          }}
-        >
-          <p
-            className="
-              font-normal
-              text-xs
-              leading-3
-              text-content-secondary
-              dark:text-dark-border-inverse
-              whitespace-nowrap
-            "
-            data-testid="action-label"
-          >
-            {actionLabel}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-DropdownItemHeading.displayName = 'DropdownItemHeading';
+import React from 'react';
+import type { DropdownItemHeadingProps } from './DropdownItemHeading.types';
+import { getIcon } from './icons';
+
+/**
+ * Componente DropdownItemHeading del sistema de diseño Siesa
+ *
+ * Implementación pixel-perfect basada en Figma (node 6135:32539)
+ * para encabezados en menús dropdown con icono, label, descripción y acción.
+ *
+ * **Estructura:**
+ * - Icon Wrapper: Opcional, icono de 16x16px
+ * - Content Wrapper: Label + Description (flexible)
+ * - Action Wrapper: Opcional, texto de acción en la derecha
+ *
+ * **Dimensiones:**
+ * - Altura flexible (contenido vertical)
+ * - Width mínimo: 224px
+ * - Padding: 8px vertical, 16px horizontal
+ * - Border radius: 8px (rounded-lg)
+ *
+ * **Tipografía:**
+ * - Label: Label/Small (14px Bold) - content-primary
+ * - Description: Paragraph/Tiny (12px Regular) - content-secondary
+ * - Action: Paragraph/XXSmall (10px Regular) - content-secondary
+ *
+ * **Dark Mode:**
+ * - Label: #18181b (light) → #bfe2fe (dark)
+ * - Description: #a1a1aa (light) → #93d1fd (dark)
+ * - Icon: #0e79fd (light) → #bfe2fe (dark)
+ * - Action: #a1a1aa (light) → #93d1fd (dark)
+ *
+ * **Estados:**
+ * - Default: Sin hover/focus
+ * - Hover: Overlay sutil (managed by parent Dropdown)
+ * - Disabled: Opacity 50% (managed by parent Dropdown)
+ *
+ * **Especificaciones de Figma:**
+ * - Gap entre elementos: 12px
+ * - Gap entre label y description: 2px
+ * - Rounded: 8px (rounded-lg)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label/Small, Paragraph/Tiny)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-32539 - Diseño Figma
+ *
+ * @example
+ * ```tsx
+ * // Con icono, label, descripción y acción
+ * <DropdownItemHeading
+ *   label="Settings"
+ *   description="Configure your preferences"
+ *   showDescription={true}
+ *   icon={<SettingsIcon />}
+ *   showIcon={true}
+ *   actionLabel="Clear"
+ *   showAction={true}
+ *   onActionClick={handleClear}
+ * />
+ *
+ * // Solo label y descripción (sin icono ni acción)
+ * <DropdownItemHeading
+ *   label="My Account"
+ *   description="user@example.com"
+ *   showDescription={true}
+ * />
+ *
+ * // Solo label
+ * <DropdownItemHeading
+ *   label="Quick Actions"
+ *   showDescription={false}
+ * />
+ * ```
+ */
+export const DropdownItemHeading: React.FC<DropdownItemHeadingProps> = ({
+  label = 'Label',
+  description,
+  showDescription = true,
+  iconName = 'cog-6-tooth',
+  showIcon = true,
+  actionLabel,
+  showAction = false,
+  onActionClick,
+  className = '',
+  ...rest
+}) => {
+
+  return (
+    <div
+      className={`
+        flex
+        gap-3
+        items-center
+        px-4
+        py-2
+        rounded-lg
+        w-56
+        ${className}
+      `}
+      data-testid="dropdown-item-heading"
+      {...rest}
+    >
+      {/* ===== ICON WRAPPER ===== */}
+      {showIcon && iconName && (
+        <div
+          className="
+            flex
+            items-center
+            justify-center
+            shrink-0
+            w-4
+            h-4
+          "
+          data-testid="icon-wrapper"
+        >
+          <div className="text-primary-custom-600 dark:text-dark-content-inverse">
+            {getIcon(iconName, 'w-4 h-4')}
+          </div>
+        </div>
+      )}
+
+      {/* ===== CONTENT WRAPPER ===== */}
+      <div
+        className="
+          flex
+          flex-1
+          flex-col
+          gap-0.5
+          items-start
+          justify-center
+          min-w-0
+        "
+        data-testid="content-wrapper"
+      >
+        {/* Label */}
+        <p
+          className="
+            font-bold
+            text-sm
+            leading-5
+            text-content-primary
+            dark:text-dark-content-inverse
+            whitespace-nowrap
+            overflow-hidden
+            text-ellipsis
+          "
+          data-testid="label"
+        >
+          {label}
+        </p>
+
+        {/* Description */}
+        {showDescription && description && (
+          <p
+            className="
+              font-normal
+              text-xs
+              leading-4
+              text-content-secondary
+              dark:text-dark-border-inverse
+              w-full
+              whitespace-pre-wrap
+              overflow-hidden
+              text-ellipsis
+            "
+            data-testid="description"
+          >
+            {description}
+          </p>
+        )}
+      </div>
+
+      {/* ===== ACTION WRAPPER ===== */}
+      {showAction && actionLabel && (
+        <div
+          className="
+            flex
+            items-center
+            justify-center
+            shrink-0
+            cursor-pointer
+            hover:opacity-80
+            transition-opacity
+            duration-150
+          "
+          data-testid="action-wrapper"
+          onClick={onActionClick}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              onActionClick?.(e as any);
+            }
+          }}
+        >
+          <p
+            className="
+              font-normal
+              text-xs
+              leading-3
+              text-content-secondary
+              dark:text-dark-border-inverse
+              whitespace-nowrap
+            "
+            data-testid="action-label"
+          >
+            {actionLabel}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+DropdownItemHeading.displayName = 'DropdownItemHeading';

package/src/components/DropdownItemHeading/DropdownItemHeading.types.ts

@@ -1,93 +1,93 @@
-/**
- * Props del componente DropdownItemHeading
- *
- * Especificaciones de Figma: node 6135:32539
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-32539&m=dev
- */
-export interface DropdownItemHeadingProps {
-  /**
-   * Texto del label principal del heading
-   * Tipografía: Label/Small (14px, Bold)
-   * Color: content-primary (#18181b light, #bfe2fe dark)
-   *
-   * @default 'Label'
-   */
-  label?: string;
-
-  /**
-   * Texto de descripción secundaria bajo el label
-   * Tipografía: Paragraph/Tiny (12px, Regular)
-   * Color: content-secondary (#a1a1aa light, #93d1fd dark)
-   *
-   * @default undefined
-   */
-  description?: string;
-
-  /**
-   * Si se debe mostrar la descripción
-   * Cuando es false, solo muestra el label
-   *
-   * @default true
-   */
-  showDescription?: boolean;
-
-  /**
-   * Nombre del icono a mostrar (string)
-   * Iconos disponibles:
-   * - `'cog-6-tooth'`: Icono de engranaje (por defecto)
-   * - `'check'`: Icono de check
-   * - `'x'`: Icono de cerrar
-   * - `'chevron-down'`: Icono de chevron hacia abajo
-   *
-   * Tamaño: 16x16px
-   * Color: primary-custom-600 (#0e79fd light, #bfe2fe dark)
-   *
-   * Si no se proporciona, se usa 'cog-6-tooth' por defecto
-   *
-   * @default 'cog-6-tooth'
-   * @see icons.tsx para ver los iconos disponibles
-   */
-  iconName?: string | null;
-
-  /**
-   * Si se debe mostrar el icono en la izquierda
-   *
-   * @default true
-   */
-  showIcon?: boolean;
-
-  /**
-   * Texto de acción a mostrar en la derecha
-   * Tipografía: Paragraph/XXSmall (10px, Regular)
-   * Color: content-secondary (#a1a1aa light, #93d1fd dark)
-   *
-   * Comúnmente usado para "Clear", "Reset", etc.
-   *
-   * @default undefined
-   */
-  actionLabel?: string;
-
-  /**
-   * Si se debe mostrar el action label en la derecha
-   *
-   * @default false
-   */
-  showAction?: boolean;
-
-  /**
-   * Callback ejecutado al hacer click en el action label
-   */
-  onActionClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-
-  /**
-   * Clases CSS adicionales para personalización
-   *
-   * @default ''
-   */
-  className?: string;
-
-  /**
-   * Atributos HTML adicionales
-   */
-  [key: string]: unknown;
-}
+/**
+ * Props del componente DropdownItemHeading
+ *
+ * Especificaciones de Figma: node 6135:32539
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-32539&m=dev
+ */
+export interface DropdownItemHeadingProps {
+  /**
+   * Texto del label principal del heading
+   * Tipografía: Label/Small (14px, Bold)
+   * Color: content-primary (#18181b light, #bfe2fe dark)
+   *
+   * @default 'Label'
+   */
+  label?: string;
+
+  /**
+   * Texto de descripción secundaria bajo el label
+   * Tipografía: Paragraph/Tiny (12px, Regular)
+   * Color: content-secondary (#a1a1aa light, #93d1fd dark)
+   *
+   * @default undefined
+   */
+  description?: string;
+
+  /**
+   * Si se debe mostrar la descripción
+   * Cuando es false, solo muestra el label
+   *
+   * @default true
+   */
+  showDescription?: boolean;
+
+  /**
+   * Nombre del icono a mostrar (string)
+   * Iconos disponibles:
+   * - `'cog-6-tooth'`: Icono de engranaje (por defecto)
+   * - `'check'`: Icono de check
+   * - `'x'`: Icono de cerrar
+   * - `'chevron-down'`: Icono de chevron hacia abajo
+   *
+   * Tamaño: 16x16px
+   * Color: primary-custom-600 (#0e79fd light, #bfe2fe dark)
+   *
+   * Si no se proporciona, se usa 'cog-6-tooth' por defecto
+   *
+   * @default 'cog-6-tooth'
+   * @see icons.tsx para ver los iconos disponibles
+   */
+  iconName?: string | null;
+
+  /**
+   * Si se debe mostrar el icono en la izquierda
+   *
+   * @default true
+   */
+  showIcon?: boolean;
+
+  /**
+   * Texto de acción a mostrar en la derecha
+   * Tipografía: Paragraph/XXSmall (10px, Regular)
+   * Color: content-secondary (#a1a1aa light, #93d1fd dark)
+   *
+   * Comúnmente usado para "Clear", "Reset", etc.
+   *
+   * @default undefined
+   */
+  actionLabel?: string;
+
+  /**
+   * Si se debe mostrar el action label en la derecha
+   *
+   * @default false
+   */
+  showAction?: boolean;
+
+  /**
+   * Callback ejecutado al hacer click en el action label
+   */
+  onActionClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+
+  /**
+   * Clases CSS adicionales para personalización
+   *
+   * @default ''
+   */
+  className?: string;
+
+  /**
+   * Atributos HTML adicionales
+   */
+  [key: string]: unknown;
+}