carconnect-gatherleads-ui-lib 3.5.0-GL-1521-Modulo-Rendimiento.3 → 3.5.0-GL-1521-Modulo-Rendimiento.4

package/dist/carconnect-gatherleads-ui-lib.d.ts

@@ -673,22 +673,52 @@ export declare const GATHER_CONVERSION_CHIP_DEFAULT_NULL_LABEL = "N/A";
 export declare const GATHER_CONVERSION_CHIP_DEFAULT_THRESHOLDS: GatherConversionChipThresholds;
 
 /**
- * `GatherBadge` — A label/badge component with color variants.
+ * GatherBadge — A label/badge component with color variants and full external customization
  *
- * Available variants: system, package, custom, identity, catalog, active, default.
+ * Supports predefined semantic intents (success, warning, danger, info) and a fully
+ * customizable `intent="custom"` mode where colors are controlled via inline style props
+ * or Tailwind className overrides.
  *
  * @example
  * ```tsx
- * <GatherBadge label="System" variant="system" />
- * <GatherBadge label="Active" variant="active" size="sm" />
- * <GatherBadge label="Identity" variant="identity" icon={<KeyIcon />} />
+ * // Predefined intent
+ * <GatherBadge label="Active" intent="success" appearance="outline" />
+ *
+ * // Fully custom colors via inline styles
+ * <GatherBadge
+ *   label="Vigente"
+ *   intent="custom"
+ *   appearance="outline"
+ *   customColor="#ecfdf5"
+ *   customTextColor="#047857"
+ *   customBorderColor="#a7f3d0"
+ *   icon={<span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />}
+ * />
+ *
+ * // Custom via className overrides (Tailwind)
+ * <GatherBadge
+ *   label="Digital"
+ *   intent="custom"
+ *   appearance="outline"
+ *   className="bg-sky-50 text-sky-700 border-sky-200"
+ * />
  * ```
  */
 export declare const GatherBadge: default_2.ForwardRefExoticComponent<GatherBadgeProps & default_2.RefAttributes<HTMLSpanElement>>;
 
 export declare type GatherBadgeAppearance = 'subtle' | 'outline' | 'solid';
 
-export declare type GatherBadgeIntent = 'neutral' | 'success' | 'warning' | 'info' | 'danger' | 'brand' | 'muted' | 'accent' | 'identity';
+/** Granular CSS class overrides for internal badge elements */
+export declare interface GatherBadgeClassNames {
+    /** Override for the root span element */
+    root?: string;
+    /** Override for the icon wrapper span */
+    icon?: string;
+    /** Override for the label text (when using labelClassName shortcut) */
+    label?: string;
+}
+
+export declare type GatherBadgeIntent = 'neutral' | 'success' | 'warning' | 'info' | 'danger' | 'brand' | 'muted' | 'accent' | 'identity' | 'custom';
 
 export declare interface GatherBadgeProps {
     /** Badge text label */
@@ -703,10 +733,16 @@ export declare interface GatherBadgeProps {
     size?: GatherBadgeSize;
     /** Icon rendered to the left of the label */
     icon?: React.ReactNode;
-    /** Prop to define custom badge color */
+    /** Prop to define custom badge background color (inline style) */
     customColor?: string;
-    /** Additional CSS classes */
+    /** Custom text color (inline style) — used with customColor or intent="custom" */
+    customTextColor?: string;
+    /** Custom border color (inline style) — used with appearance="outline" and intent="custom" */
+    customBorderColor?: string;
+    /** Additional CSS classes for the root element */
     className?: string;
+    /** Granular CSS class overrides for internal elements */
+    classNames?: GatherBadgeClassNames;
 }
 
 export declare type GatherBadgeShape = 'pill' | 'circle';
@@ -1085,13 +1121,13 @@ export declare interface GatherCheckboxGroupFieldConfig extends BaseFieldConfig
 }
 
 /**
- * `GatherCheckboxList` — A scrollable checkbox list with support for
- * labels, sublabels, badges and disabled states.
- *
- * Uses the primitive `Checkbox` component internally for consistent styling.
+ * GatherCheckboxList — A scrollable checkbox list with support for
+ * labels, sublabels, badges, startContent, and disabled states.
+ * Includes optional select-all/deselect-all header and full style customization.
  *
  * @example
  * ```tsx
+ * // Basic usage
  * <GatherCheckboxList
  *   items={[
  *     { id: '1', label: 'Name', sublabel: 'name', checked: true },
@@ -1100,10 +1136,38 @@ export declare interface GatherCheckboxGroupFieldConfig extends BaseFieldConfig
  *   onChange={(id, checked) => console.log(id, checked)}
  *   maxHeight="300px"
  * />
+ *
+ * // With colored dots and select-all header
+ * <GatherCheckboxList
+ *   items={[
+ *     { id: 'digital', label: 'Digital', checked: true, startContent: <span className="h-2.5 w-2.5 rounded-full bg-sky-500" /> },
+ *     { id: 'showroom', label: 'Showroom', checked: false, startContent: <span className="h-2.5 w-2.5 rounded-full bg-emerald-500" /> },
+ *   ]}
+ *   onChange={handleChange}
+ *   showSelectAll
+ *   onSelectAll={handleSelectAll}
+ *   onDeselectAll={handleDeselectAll}
+ * />
  * ```
  */
 export declare const GatherCheckboxList: default_2.ForwardRefExoticComponent<GatherCheckboxListProps & default_2.RefAttributes<HTMLDivElement>>;
 
+/** Granular CSS class overrides for internal checkbox list elements */
+export declare interface GatherCheckboxListClassNames {
+    /** Override for the root container */
+    root?: string;
+    /** Override for the <ul> list element */
+    list?: string;
+    /** Override for each list item <li> */
+    item?: string;
+    /** Override for the label text */
+    label?: string;
+    /** Override for the sublabel text */
+    sublabel?: string;
+    /** Override for the select-all header container */
+    header?: string;
+}
+
 export declare interface GatherCheckboxListItem {
     /** Unique identifier */
     id: string;
@@ -1115,6 +1179,8 @@ export declare interface GatherCheckboxListItem {
     checked: boolean;
     /** Whether the checkbox is disabled */
     disabled?: boolean;
+    /** Additional content rendered on the left before the label (dots, icons) */
+    startContent?: React.ReactNode;
     /** Additional content rendered on the right (badges, icons) */
     endContent?: React.ReactNode;
 }
@@ -1128,8 +1194,20 @@ export declare interface GatherCheckboxListProps {
     maxHeight?: string;
     /** Whether to show dividers between items. Defaults to true. */
     showDividers?: boolean;
-    /** Additional CSS classes */
+    /** Whether to show a "Select all / Deselect all" header. Defaults to false. */
+    showSelectAll?: boolean;
+    /** Label for "Select all" action (default: "Seleccionar todo") */
+    selectAllLabel?: string;
+    /** Label for "Deselect all" action (default: "Deseleccionar todo") */
+    deselectAllLabel?: string;
+    /** Callback when "Select all" is clicked */
+    onSelectAll?: () => void;
+    /** Callback when "Deselect all" is clicked */
+    onDeselectAll?: () => void;
+    /** Additional CSS classes for the root container */
     className?: string;
+    /** Granular CSS class overrides for internal elements */
+    classNames?: GatherCheckboxListClassNames;
     /** data-testid for testing */
     'data-testid'?: string;
 }
@@ -1919,21 +1997,49 @@ export declare const GatherDonutChartSkeleton: default_2.FC<{
 }>;
 
 /**
- * `GatherEmptyState` — A generic empty state component.
+ * GatherEmptyState — A generic empty state component with full style customization
+ *
  * Displays an icon, primary message, description and optional action.
+ * Every internal element can be customized via the `classNames` prop.
  *
  * @example
  * ```tsx
+ * // Basic usage
  * <GatherEmptyState
  *   icon={<InboxIcon className="h-10 w-10" />}
  *   title="No custom properties"
  *   description="Create your first custom property"
  *   action={<button>Create property</button>}
  * />
+ *
+ * // Fully customized (e.g., icon with colored circle background)
+ * <GatherEmptyState
+ *   icon={<Target className="h-5 w-5" />}
+ *   title="No periods configured"
+ *   description="Set up your first budget period to start tracking CPL."
+ *   action={<GatherButton variant="gather-primary">Configure period</GatherButton>}
+ *   classNames={{
+ *     icon: 'h-10 w-10 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center',
+ *     title: 'text-sm font-bold text-slate-900',
+ *     description: 'text-xs text-slate-500 max-w-md',
+ *   }}
+ * />
  * ```
  */
 export declare const GatherEmptyState: default_2.ForwardRefExoticComponent<GatherEmptyStateProps & default_2.RefAttributes<HTMLDivElement>>;
 
+/** Granular CSS class overrides for internal empty state elements */
+export declare interface GatherEmptyStateClassNames {
+    /** Override for the icon wrapper div */
+    icon?: string;
+    /** Override for the title paragraph */
+    title?: string;
+    /** Override for the description paragraph */
+    description?: string;
+    /** Override for the action wrapper div */
+    action?: string;
+}
+
 export declare interface GatherEmptyStateProps {
     /** Main icon */
     icon?: React.ReactNode;
@@ -1943,8 +2049,10 @@ export declare interface GatherEmptyStateProps {
     description?: string;
     /** Optional action (button, link, etc.) */
     action?: React.ReactNode;
-    /** Additional CSS classes */
+    /** Additional CSS classes for the root container */
     className?: string;
+    /** Granular CSS class overrides for internal elements */
+    classNames?: GatherEmptyStateClassNames;
     /** data-testid for testing */
     'data-testid'?: string;
 }
@@ -3947,6 +4055,37 @@ export declare interface GatherTableBodyProps<T = any> extends Omit<React.HTMLAt
      * Contenido personalizado para mostrar cuando no hay columnas definidas.
      */
     children?: React.ReactNode;
+    /**
+     * Set of row indices or data IDs that are currently expanded.
+     * When provided, rows can render expanded content below them.
+     */
+    expandedRowIds?: Set<string | number>;
+    /**
+     * Callback when a row's expand/collapse state is toggled.
+     *
+     * @param rowId - The ID or index of the toggled row
+     */
+    onRowExpand?: (rowId: string | number) => void;
+    /**
+     * Function to render expanded content below a row.
+     * Only called for rows present in `expandedRowIds`.
+     *
+     * @param row - The data item of the expanded row
+     * @param rowIndex - Index of the row
+     *
+     * @returns Content to render in a full-width colspan cell below the row
+     */
+    renderExpandedContent?: (row: T, rowIndex: number) => React.ReactNode;
+    /**
+     * Function to determine the unique ID for a row (used with expandedRowIds).
+     * If not provided, the row index is used.
+     *
+     * @param row - The data item
+     * @param rowIndex - Index of the row
+     *
+     * @returns Unique identifier for the row
+     */
+    getRowId?: (row: T, rowIndex: number) => string | number;
 }
 
 /**
@@ -3972,6 +4111,16 @@ export declare const GatherTableCaption: default_2.ForwardRefExoticComponent<Gat
 export declare interface GatherTableCaptionProps extends default_2.HTMLAttributes<HTMLTableCaptionElement> {
 }
 
+/** CSS class overrides for internal table elements */
+export declare interface GatherTableClassNames {
+    /** Override for the outer container div */
+    container?: string;
+    /** Override for the <table> element */
+    table?: string;
+    /** Override for the header banner wrapper */
+    headerBanner?: string;
+}
+
 /**
  * Interfaz principal para columnas con type safety completo.
  *
@@ -4105,6 +4254,12 @@ export declare interface GatherTableProps extends React.HTMLAttributes<HTMLTable
     maxHeight?: string;
     /** It leads to indicate if the table is embedded with his parent or not */
     embedded?: boolean;
+    /**
+     * Content rendered between the table header and body.
+     * Useful for informational banners, warnings, or filter summaries.
+     * Rendered outside the table element (above the scrollable area) to avoid layout issues.
+     */
+    headerBanner?: React.ReactNode;
 }
 
 /**