carconnect-gatherleads-ui-lib 3.4.0 → 3.5.0-GL-1521-Modulo-Rendimiento.1

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

@@ -1334,6 +1334,59 @@ export declare interface GatherComboboxProps extends Omit<React_2.InputHTMLAttri
     loadingText?: string;
 }
 
+/** Available color accents for the coming soon page theming */
+export declare type GatherComingSoonAccent = 'emerald' | 'amber' | 'sky';
+
+/**
+ * Full-page template for sections under development. Displays a frosted
+ * shimmer background (customizable via `background` prop) with a centered
+ * card containing an icon, "MUY PRONTO" badge, title, description, and
+ * a benefits checklist. No CTA or data collection.
+ *
+ * @param {GatherComingSoonPageProps} props - Component props
+ * @param {React.ReactNode} props.icon - Section icon (consumer controls size)
+ * @param {GatherComingSoonAccent} props.colorAccent - Color accent: 'emerald' | 'amber' | 'sky'
+ * @param {string} props.title - Section title
+ * @param {string} props.description - Value-oriented description (no dates or technical features)
+ * @param {string[]} props.benefits - List of 3-4 generic benefits
+ * @param {React.ReactNode} [props.background] - Custom background. Defaults to generic shimmer layout
+ * @param {string} [props.className] - Additional classes for root container
+ * @param {string} [props.data-testid] - Test identifier
+ *
+ * @returns {React.ReactElement} Full-page coming soon template
+ *
+ * @example
+ * ```tsx
+ * <GatherComingSoonPage
+ *   icon={<TrendingUp className="h-6 w-6" />}
+ *   colorAccent="amber"
+ *   title="Rendimiento"
+ *   description="Visualiza el desempeño de tu operación."
+ *   benefits={["Métricas en tiempo real", "Comparativas entre períodos"]}
+ * />
+ * ```
+ */
+export declare const GatherComingSoonPage: default_2.FC<GatherComingSoonPageProps>;
+
+export declare interface GatherComingSoonPageProps {
+    /** Section icon as ReactNode — consumer controls size and styling */
+    icon: React.ReactNode;
+    /** Color accent applied to icon, badge, and benefit checkmarks */
+    colorAccent: GatherComingSoonAccent;
+    /** Section title displayed in the central card */
+    title: string;
+    /** Value-oriented description — no dates or technical feature names */
+    description: string;
+    /** List of 3-4 generic benefits shown with checkmarks */
+    benefits: string[];
+    /** Custom background. If omitted, uses default generic shimmer layout */
+    background?: React.ReactNode;
+    /** Additional CSS classes for the root container */
+    className?: string;
+    /** data-testid for testing */
+    'data-testid'?: string;
+}
+
 /**
  * Generic conversion percentage chip with traffic-light color coding.
  * Displays a percentage with green (good), yellow (warning), or red (danger) styling
@@ -2946,6 +2999,53 @@ export declare interface GatherMultiSelectProps {
     loadingText?: string;
 }
 
+/**
+ * Conditional wrapper that displays a skeleton structure while loading
+ * and reveals real content when data is ready. Applies a smooth 200ms
+ * opacity fade transition between states.
+ *
+ * Includes WCAG A accessibility: aria-busy and aria-live="polite" to
+ * communicate loading state to screen readers.
+ *
+ * @param {GatherPageSkeletonProps} props - Component props
+ * @param {boolean} props.loading - Controls whether skeleton or content is shown
+ * @param {React.ReactNode} props.skeleton - Skeleton structure (built with GatherShimmer)
+ * @param {React.ReactNode} props.children - Real page content
+ * @param {string} [props.className] - Additional classes for the root container
+ * @param {string} [props.data-testid] - Test identifier
+ *
+ * @returns {React.ReactElement} Container with skeleton or content based on loading state
+ *
+ * @example
+ * ```tsx
+ * <GatherPageSkeleton
+ *   loading={isLoading}
+ *   skeleton={
+ *     <div className="space-y-4 p-6">
+ *       <GatherShimmer className="h-8 w-1/3" />
+ *       <GatherShimmer className="h-64 w-full" />
+ *     </div>
+ *   }
+ * >
+ *   <ActualPageContent />
+ * </GatherPageSkeleton>
+ * ```
+ */
+export declare const GatherPageSkeleton: default_2.FC<GatherPageSkeletonProps>;
+
+export declare interface GatherPageSkeletonProps {
+    /** Controls whether the skeleton or the real content is displayed */
+    loading: boolean;
+    /** Skeleton structure defined inline by the consumer (using GatherShimmer) */
+    skeleton: React.ReactNode;
+    /** Real page content revealed when loading is false */
+    children: React.ReactNode;
+    /** Additional CSS classes for the root container */
+    className?: string;
+    /** data-testid for testing */
+    'data-testid'?: string;
+}
+
 /**
  * Componente GatherRadioButton - Renderiza un grupo de radio buttons con opciones configurables
  *
@@ -3299,6 +3399,41 @@ declare const gatherSelectVariants: (props?: ({
     state?: "default" | "success" | "warning" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+/**
+ * Atomic animated primitive for building skeleton loading structures.
+ * Renders a rectangle with configurable animation (pulse or wave).
+ * Consumer controls size and position via `className` prop.
+ *
+ * @param {GatherShimmerProps} props - Component props
+ * @param {string} [props.className] - Tailwind classes for width, height, rounded, margins
+ * @param {React.CSSProperties} [props.style] - Fallback for dynamic sizes
+ * @param {GatherShimmerVariant} [props.variant='pulse'] - Animation variant: 'pulse' or 'wave'
+ * @param {string} [props.data-testid] - Test identifier
+ *
+ * @returns {React.ReactElement} A decorative shimmer block with aria-hidden
+ *
+ * @example
+ * ```tsx
+ * <GatherShimmer className="h-8 w-1/3" />
+ * <GatherShimmer className="h-64 w-full" variant="wave" />
+ * ```
+ */
+export declare const GatherShimmer: default_2.FC<GatherShimmerProps>;
+
+export declare interface GatherShimmerProps {
+    /** Tailwind classes for width, height, rounded, margins */
+    className?: string;
+    /** Fallback for dynamic sizes when Tailwind classes are insufficient */
+    style?: React.CSSProperties;
+    /** Animation variant. Default: 'pulse' */
+    variant?: GatherShimmerVariant;
+    /** data-testid for testing */
+    'data-testid'?: string;
+}
+
+/** Animation variant for the shimmer effect */
+export declare type GatherShimmerVariant = 'pulse' | 'wave';
+
 /**
  * GatherStackedBarChart — Stacked bar chart with vertical and horizontal orientations.
  * Vertical mode: bars grow upward, categories on X-axis.