siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/DropdownItemCollapsible/DropdownItemCollapsible.types.ts

@@ -1,111 +1,136 @@
-import type { ReactNode } from 'react';
-
-/**
- * Props del componente DropdownItemCollapsible
- *
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-34374
- */
-export interface DropdownItemCollapsibleProps {
-  /**
-   * Texto o contenido principal del item
-   * Ejemplo: "Users", "Customers", "Departments"
-   */
-  label: string;
-
-  /**
-   * Icono a mostrar antes del texto (izquierda)
-   * Recomendado: 16x16px
-   */
-  icon?: ReactNode;
-
-  /**
-   * Items anidados que se muestran cuando el item está expandido
-   * Cada item anidado tiene label e icono opcional
-   */
-  children?: DropdownItemCollapsibleChildProps[];
-
-  /**
-   * Si el item está expandido inicialmente
-   * @default false
-   */
-  defaultOpen?: boolean;
-
-  /**
-   * Si el item está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Callback cuando el item se expande/contrae
-   * @param open - nuevo estado de expansión
-   */
-  onOpenChange?: (open: boolean) => void;
-
-  /**
-   * Callback cuando se hace click en el item (sin expandir)
-   * Útil para items que actúan como botones normales
-   */
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-
-  /**
-   * Si el item debería actuar como un botón normal sin colapsable
-   * @default false
-   */
-  isCollapsible?: boolean;
-
-  /**
-   * Si mostrar un encabezado de sección antes del item
-   * @default false
-   */
-  showHeading?: boolean;
-
-  /**
-   * Texto del encabezado de sección
-   * Se usa cuando showHeading es true
-   * Ejemplo: "Section Title"
-   */
-  headingLabel?: string;
-
-  /**
-   * Si mostrar divisor después del item/encabezado
-   * @default true
-   */
-  showDivider?: boolean;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-}
-
-/**
- * Props de items anidados dentro del colapsable
- */
-export interface DropdownItemCollapsibleChildProps {
-  /**
-   * Texto del item anidado
-   */
-  label: string;
-
-  /**
-   * Icono opcional del item anidado
-   */
-  icon?: ReactNode;
-
-  /**
-   * Si el item anidado está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Callback cuando se hace click en el item anidado
-   */
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-}
+import type { ReactNode } from 'react';
+
+/**
+ * Props del componente DropdownItemCollapsible
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-34374
+ */
+export interface DropdownItemCollapsibleProps {
+  /**
+   * Texto o contenido principal del item
+   * Ejemplo: "Users", "Customers", "Departments"
+   */
+  label: string;
+
+  /**
+   * Icono a mostrar antes del texto (izquierda)
+   * Recomendado: 16x16px
+   */
+  icon?: ReactNode;
+
+  /**
+   * Items anidados que se muestran cuando el item está expandido
+   * Cada item anidado tiene label e icono opcional
+   */
+  children?: DropdownItemCollapsibleChildProps[];
+
+  /**
+   * Si el item está expandido inicialmente
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Si el item está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Callback cuando el item se expande/contrae
+   * @param open - nuevo estado de expansión
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Callback cuando se hace click en el item (sin expandir)
+   * Útil para items que actúan como botones normales
+   */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Si el item debería actuar como un botón normal sin colapsable
+   * @default false
+   */
+  isCollapsible?: boolean;
+
+  /**
+   * Si mostrar un encabezado de sección antes del item
+   * @default false
+   */
+  showHeading?: boolean;
+
+  /**
+   * Texto del encabezado de sección
+   * Se usa cuando showHeading es true
+   * Ejemplo: "Section Title"
+   */
+  headingLabel?: string;
+
+  /**
+   * Si mostrar divisor después del item/encabezado
+   * @default true
+   */
+  showDivider?: boolean;
+
+  /**
+   * Si el item está seleccionado (activo)
+   * Útil para NavigationRailTypes en modo expandido
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Si mostrar un badge de notificación (dot rojo)
+   * @default false
+   */
+  badge?: boolean;
+
+  /**
+   * Número a mostrar en el badge (máximo 99+)
+   * Si se proporciona, se muestra en lugar del dot rojo
+   */
+  badgeCount?: number;
+
+  /**
+   * Color del badge ('red', 'blue', etc.)
+   * @default 'red'
+   */
+  badgeColor?: 'red' | 'blue' | 'amber' | 'green' | 'purple';
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+}
+
+/**
+ * Props de items anidados dentro del colapsable
+ */
+export interface DropdownItemCollapsibleChildProps {
+  /**
+   * Texto del item anidado
+   */
+  label: string;
+
+  /**
+   * Icono opcional del item anidado
+   */
+  icon?: ReactNode;
+
+  /**
+   * Si el item anidado está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Callback cuando se hace click en el item anidado
+   */
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+}