carconnect-gatherleads-ui-lib 3.7.0-GL-1700-Modulo-Rendimiento-ROI.1 → 3.7.0-GL-1700-Modulo-Rendimiento-ROI.2

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';
@@ -1087,13 +1123,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 },
@@ -1102,10 +1138,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;
@@ -1117,6 +1181,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;
 }
@@ -1130,8 +1196,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;
 }
@@ -1391,6 +1469,117 @@ export declare interface GatherComingSoonPageProps {
     'data-testid'?: string;
 }
 
+/**
+ * Reusable confirmation dialog with multiple visual intents (error, warning, success, info)
+ * Self-contained portal-based dialog with overlay, keyboard handling, and focus trap.
+ *
+ * @param {GatherConfirmDialogProps} props - Component configuration
+ *
+ * @returns {JSX.Element | null} Rendered dialog or null when closed
+ *
+ * @example
+ * ```tsx
+ * // Destructive confirmation (delete)
+ * <GatherConfirmDialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   variant="error"
+ *   title="¿Estás seguro?"
+ *   description="Esta acción no se puede deshacer."
+ *   confirmLabel="Eliminar"
+ *   onConfirm={handleDelete}
+ * />
+ *
+ * // Success confirmation
+ * <GatherConfirmDialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   variant="success"
+ *   title="Período activado"
+ *   description="El período fue activado correctamente."
+ *   onConfirm={() => setIsOpen(false)}
+ *   hideCancelButton
+ * />
+ *
+ * // Custom icon override
+ * <GatherConfirmDialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   variant="warning"
+ *   icon={<Trash2 className="h-6 w-6" />}
+ *   title="Eliminar período"
+ *   description="Se perderá todo el historial de métricas."
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ */
+export declare const GatherConfirmDialog: default_2.FC<GatherConfirmDialogProps>;
+
+export declare interface GatherConfirmDialogProps {
+    /** Whether the dialog is currently open */
+    open: boolean;
+    /** Callback fired when the dialog requests to close (overlay click, Escape, cancel button) */
+    onOpenChange: (open: boolean) => void;
+    /** Dialog title — if omitted, the title section is not rendered */
+    title?: string;
+    /** Dialog description/body text — rendered below the title */
+    description?: string;
+    /** Custom content rendered below description (for advanced use cases) */
+    children?: default_2.ReactNode;
+    /** Visual intent variant — controls icon, colors, and default confirm button style */
+    variant?: GatherConfirmDialogVariant;
+    /** Override the default icon for the variant — pass `null` to hide the icon entirely */
+    icon?: default_2.ReactNode | null;
+    /** Additional CSS classes for the icon container circle */
+    iconContainerClassName?: string;
+    /** Whether to show the icon section (default: true) */
+    showIcon?: boolean;
+    /** Dialog size preset */
+    size?: GatherConfirmDialogSize;
+    /** Text for the confirm/accept button */
+    confirmLabel?: string;
+    /** Text for the cancel button */
+    cancelLabel?: string;
+    /** Callback fired when the confirm button is clicked */
+    onConfirm: () => void;
+    /** Callback fired when the cancel button is clicked (defaults to onOpenChange(false)) */
+    onCancel?: () => void;
+    /** Variant style for the confirm button — overrides the variant-based default */
+    confirmVariant?: GatherModalVariantType;
+    /** Whether the confirm button is disabled */
+    disableConfirm?: boolean;
+    /** Whether to hide the cancel button */
+    hideCancelButton?: boolean;
+    /** Whether to hide the confirm button */
+    hideConfirmButton?: boolean;
+    /** Whether the dialog is in a loading state */
+    isLoading?: boolean;
+    /** Text displayed on the confirm button while loading (defaults to confirmLabel) */
+    loadingText?: string;
+    /** Whether clicking the overlay closes the dialog (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape closes the dialog (default: true) */
+    closeOnEsc?: boolean;
+    /** Additional CSS classes for the dialog container */
+    className?: string;
+    /** Inline styles for the dialog container */
+    style?: default_2.CSSProperties;
+    /** Additional CSS classes for the overlay/backdrop */
+    overlayClassName?: string;
+    /** Additional CSS classes for the body/content area */
+    bodyClassName?: string;
+    /** Additional CSS classes for the buttons wrapper */
+    buttonsClassName?: string;
+    /** Z-index for the dialog (default: 50) */
+    zIndex?: number;
+}
+
+/** Size presets for the confirm dialog */
+export declare type GatherConfirmDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+
+/** Visual intent/variant of the confirm dialog */
+export declare type GatherConfirmDialogVariant = 'default' | 'error' | 'warning' | 'success' | 'info';
+
 /**
  * Generic conversion percentage chip with traffic-light color coding.
  * Displays a percentage with green (good), yellow (warning), or red (danger) styling
@@ -1810,21 +1999,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;
@@ -1834,8 +2051,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;
 }
@@ -3853,6 +4072,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;
 }
 
 /**
@@ -3878,6 +4128,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.
  *
@@ -4011,6 +4271,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;
 }
 
 /**
@@ -4979,4 +5245,12 @@ export declare interface ValidationRule<T = unknown> {
  */
 export declare const VARIANT_BORDER_COLORS: Record<MetricCardVariant, string>;
 
+export declare const VARIANT_CONFIRM_BUTTON: Record<GatherConfirmDialogVariant, GatherModalVariantType>;
+
+export declare const VARIANT_DEFAULT_CONFIRM_LABEL: Record<GatherConfirmDialogVariant, string>;
+
+export declare const VARIANT_ICON_BG: Record<GatherConfirmDialogVariant, string>;
+
+export declare const VARIANT_ICON_FG: Record<GatherConfirmDialogVariant, string>;
+
 export { }