@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/dist/components/waka-checkout-stepper/index.d.ts

@@ -0,0 +1,154 @@
+import * as React from "react";
+import { LucideIcon } from "lucide-react";
+export type CheckoutStepId = "cart" | "shipping" | "payment" | "review" | "confirmation";
+export type CheckoutStepStatus = "pending" | "current" | "completed" | "error" | "skipped";
+export interface CheckoutStepValidation {
+    /** Whether the step is valid */
+    isValid: boolean;
+    /** Error message if invalid */
+    errorMessage?: string;
+    /** Field-level errors */
+    fieldErrors?: Record<string, string>;
+}
+export interface CheckoutStep {
+    /** Unique step identifier */
+    id: CheckoutStepId | string;
+    /** Step title */
+    title: string;
+    /** Step description */
+    description?: string;
+    /** Custom icon (optional) */
+    icon?: LucideIcon;
+    /** Step content component */
+    content?: React.ReactNode;
+    /** Whether step is optional (can be skipped) */
+    optional?: boolean;
+    /** Whether step is disabled */
+    disabled?: boolean;
+    /** Validation function for the step */
+    validate?: () => CheckoutStepValidation | Promise<CheckoutStepValidation>;
+    /** Summary data for the sidebar */
+    summary?: React.ReactNode;
+}
+export interface CheckoutStepperProps {
+    /** List of checkout steps */
+    steps: CheckoutStep[];
+    /** Current step index (0-indexed) */
+    currentStep?: number;
+    /** Callback when step changes */
+    onStepChange?: (stepIndex: number, stepId: string) => void;
+    /** Callback when checkout is completed */
+    onComplete?: () => void;
+    /** Layout orientation */
+    orientation?: "horizontal" | "vertical";
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Allow clicking on steps to navigate */
+    clickable?: boolean;
+    /** Only allow navigation to previous steps */
+    allowPreviousOnly?: boolean;
+    /** Show step content */
+    showContent?: boolean;
+    /** Show summary sidebar */
+    showSummary?: boolean;
+    /** Summary sidebar position */
+    summaryPosition?: "left" | "right";
+    /** Enable animated transitions */
+    animated?: boolean;
+    /** Animation direction */
+    animationDirection?: "slide" | "fade" | "scale";
+    /** Loading state */
+    isLoading?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Navigation labels */
+    labels?: {
+        back?: string;
+        next?: string;
+        skip?: string;
+        complete?: string;
+        processing?: string;
+    };
+}
+export interface UseCheckoutStepperOptions {
+    /** Initial step index */
+    initialStep?: number;
+    /** List of steps */
+    steps: CheckoutStep[];
+    /** Callback when step changes */
+    onStepChange?: (stepIndex: number, stepId: string) => void;
+    /** Callback when checkout completes */
+    onComplete?: () => void;
+    /** Validate before proceeding */
+    validateOnNext?: boolean;
+}
+export interface UseCheckoutStepperReturn {
+    /** Current step index */
+    currentStep: number;
+    /** Current step data */
+    currentStepData: CheckoutStep | undefined;
+    /** All steps with status */
+    stepsWithStatus: (CheckoutStep & {
+        status: CheckoutStepStatus;
+    })[];
+    /** Total number of steps */
+    totalSteps: number;
+    /** Whether on first step */
+    isFirstStep: boolean;
+    /** Whether on last step */
+    isLastStep: boolean;
+    /** Whether checkout is complete */
+    isComplete: boolean;
+    /** Whether currently validating */
+    isValidating: boolean;
+    /** Current validation error */
+    validationError: string | null;
+    /** Go to specific step */
+    goToStep: (index: number) => Promise<boolean>;
+    /** Go to next step */
+    nextStep: () => Promise<boolean>;
+    /** Go to previous step */
+    prevStep: () => void;
+    /** Skip current step (if optional) */
+    skipStep: () => void;
+    /** Complete checkout */
+    completeCheckout: () => Promise<boolean>;
+    /** Reset stepper */
+    reset: () => void;
+    /** Get step status */
+    getStepStatus: (index: number) => CheckoutStepStatus;
+    /** Skipped steps */
+    skippedSteps: Set<number>;
+    /** Mark step as completed manually */
+    markStepCompleted: (index: number) => void;
+}
+export interface CheckoutStepperContextValue extends UseCheckoutStepperReturn {
+    orientation: "horizontal" | "vertical";
+    size: "sm" | "md" | "lg";
+    clickable: boolean;
+    allowPreviousOnly: boolean;
+    animated: boolean;
+    animationDirection: "slide" | "fade" | "scale";
+    isLoading: boolean;
+}
+export declare function useCheckoutStepper({ initialStep, steps, onStepChange, onComplete, validateOnNext, }: UseCheckoutStepperOptions): UseCheckoutStepperReturn;
+export declare function useCheckoutStepperContext(): CheckoutStepperContextValue;
+export interface CheckoutNavigationProps {
+    /** Custom class name */
+    className?: string;
+    /** Custom labels */
+    labels?: {
+        back?: string;
+        next?: string;
+        skip?: string;
+        complete?: string;
+        processing?: string;
+    };
+}
+export declare function CheckoutNavigation({ className, labels, }: CheckoutNavigationProps): import("react/jsx-runtime").JSX.Element;
+export interface CheckoutProgressBarProps {
+    className?: string;
+}
+export declare function CheckoutProgressBar({ className }: CheckoutProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaCheckoutStepper({ steps, currentStep: controlledStep, onStepChange, onComplete, orientation, size, clickable, allowPreviousOnly, showContent, showSummary, summaryPosition, animated, animationDirection, isLoading, className, labels, }: CheckoutStepperProps): import("react/jsx-runtime").JSX.Element;
+export default WakaCheckoutStepper;

package/dist/components/waka-cohort-table/index.d.ts

@@ -0,0 +1,130 @@
+import * as React from "react";
+export type CohortPeriod = "day" | "week" | "month" | "quarter" | "year";
+export type CohortMetric = "retention" | "churn" | "revenue" | "engagement" | "custom";
+export interface CohortDataPoint {
+    /** Value for this period (0-100 for percentages, or raw value) */
+    value: number;
+    /** Number of users/items at this point */
+    count?: number;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+}
+export interface CohortRow {
+    /** Unique identifier for the cohort */
+    id: string;
+    /** Cohort label (e.g., "Jan 2024", "Week 1") */
+    label: string;
+    /** Cohort start date */
+    date: Date;
+    /** Initial cohort size */
+    size: number;
+    /** Data points for each period */
+    data: CohortDataPoint[];
+}
+export interface CohortColorScale {
+    /** Minimum value color (e.g., for 0% retention) */
+    min: string;
+    /** Maximum value color (e.g., for 100% retention) */
+    max: string;
+    /** Optional midpoint color for gradient */
+    mid?: string;
+    /** Midpoint value (defaults to 50) */
+    midValue?: number;
+}
+export interface CohortExportOptions {
+    /** Export format */
+    format: "csv" | "json";
+    /** Include metadata in export */
+    includeMetadata?: boolean;
+    /** Custom filename */
+    filename?: string;
+}
+export interface WakaCohortTableProps {
+    /** Cohort data rows */
+    data: CohortRow[];
+    /** Period type for columns */
+    period?: CohortPeriod;
+    /** Metric being displayed */
+    metric?: CohortMetric;
+    /** Custom metric label */
+    metricLabel?: string;
+    /** Whether to show as percentage */
+    showAsPercentage?: boolean;
+    /** Number of decimal places */
+    decimalPlaces?: number;
+    /** Color scale configuration */
+    colorScale?: CohortColorScale;
+    /** Show cohort size column */
+    showCohortSize?: boolean;
+    /** Show average row */
+    showAverageRow?: boolean;
+    /** Show trend indicators */
+    showTrends?: boolean;
+    /** Enable cell hover highlighting */
+    highlightOnHover?: boolean;
+    /** Show color scale legend */
+    showLegend?: boolean;
+    /** Enable export functionality */
+    enableExport?: boolean;
+    /** Callback when cell is clicked */
+    onCellClick?: (row: CohortRow, periodIndex: number, value: CohortDataPoint) => void;
+    /** Callback when export is triggered */
+    onExport?: (options: CohortExportOptions) => void;
+    /** Custom cell renderer */
+    renderCell?: (value: CohortDataPoint, row: CohortRow, periodIndex: number) => React.ReactNode;
+    /** Custom tooltip renderer */
+    renderTooltip?: (value: CohortDataPoint, row: CohortRow, periodIndex: number) => React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Table className */
+    tableClassName?: string;
+    /** Header cell className */
+    headerClassName?: string;
+    /** Body cell className */
+    cellClassName?: string;
+}
+export declare function WakaCohortTable({ data, period, metric, metricLabel, showAsPercentage, decimalPlaces, colorScale, showCohortSize, showAverageRow, showTrends, highlightOnHover, showLegend, enableExport, onCellClick, onExport, renderCell, renderTooltip, className, tableClassName, headerClassName, cellClassName, }: WakaCohortTableProps): import("react/jsx-runtime").JSX.Element;
+export interface UseCohortTableOptions {
+    /** Initial cohort data */
+    initialData?: CohortRow[];
+    /** Default period type */
+    defaultPeriod?: CohortPeriod;
+    /** Default metric */
+    defaultMetric?: CohortMetric;
+}
+export interface CohortStatistics {
+    /** Total number of cohorts */
+    totalCohorts: number;
+    /** Total users across all cohorts */
+    totalUsers: number;
+    /** Average initial cohort size */
+    averageCohortSize: number;
+    /** Average retention at each period */
+    averageRetentionByPeriod: number[];
+    /** Overall average retention */
+    overallAverageRetention: number;
+    /** Best performing cohort */
+    bestCohort: CohortRow | null;
+    /** Worst performing cohort */
+    worstCohort: CohortRow | null;
+}
+export declare function useCohortTable({ initialData, defaultPeriod, defaultMetric, }?: UseCohortTableOptions): {
+    data: CohortRow[];
+    period: CohortPeriod;
+    metric: CohortMetric;
+    selectedCohort: string;
+    statistics: CohortStatistics;
+    setData: React.Dispatch<React.SetStateAction<CohortRow[]>>;
+    setPeriod: React.Dispatch<React.SetStateAction<CohortPeriod>>;
+    setMetric: React.Dispatch<React.SetStateAction<CohortMetric>>;
+    setSelectedCohort: React.Dispatch<React.SetStateAction<string>>;
+    addCohort: (cohort: CohortRow) => void;
+    updateCohort: (id: string, updates: Partial<CohortRow>) => void;
+    removeCohort: (id: string) => void;
+    updateDataPoint: (cohortId: string, periodIndex: number, value: Partial<CohortDataPoint>) => void;
+    sortCohorts: (sortBy: "date" | "size" | "retention", order?: "asc" | "desc") => void;
+    filterByDateRange: (startDate: Date, endDate: Date) => CohortRow[];
+    getCohortById: (id: string) => CohortRow;
+    reset: () => void;
+};
+export default WakaCohortTable;

package/dist/components/waka-color-picker/index.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+export type ColorFormat = "hex" | "rgb" | "hsl";
+export interface WakaColorPickerProps {
+    /** Valeur de la couleur */
+    value?: string;
+    /** Callback de changement */
+    onChange?: (color: string) => void;
+    /** Format de couleur */
+    format?: ColorFormat;
+    /** Afficher le canal alpha */
+    showAlpha?: boolean;
+    /** Afficher les couleurs prédéfinies */
+    showPresets?: boolean;
+    /** Couleurs prédéfinies personnalisées */
+    presets?: string[];
+    /** Afficher l'outil EyeDropper (si supporté) */
+    showEyeDropper?: boolean;
+    /** Désactivé */
+    disabled?: boolean;
+    /** Placeholder */
+    placeholder?: string;
+    /** Classes CSS additionnelles */
+    className?: string;
+    /** Taille */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Composant WakaColorPicker
+ */
+export declare const WakaColorPicker: React.ForwardRefExoticComponent<WakaColorPickerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Version intégrée avec react-hook-form
+ */
+export interface WakaColorPickerFormProps extends WakaColorPickerProps {
+    name: string;
+    error?: string;
+    label?: string;
+}
+export declare const WakaColorPickerForm: React.ForwardRefExoticComponent<WakaColorPickerFormProps & React.RefAttributes<HTMLButtonElement>>;
+export default WakaColorPicker;

package/dist/components/waka-combo-counter/index.d.ts

@@ -0,0 +1,53 @@
+export interface WakaComboCounterProps {
+    /** Current combo count */
+    combo: number;
+    /** Current multiplier (e.g., 2 for x2) */
+    multiplier?: number;
+    /** Maximum multiplier cap */
+    maxMultiplier?: number;
+    /** Time remaining to maintain combo (0-100 percentage) */
+    timeRemaining?: number;
+    /** Callback when combo breaks (timer runs out) */
+    onComboBreak?: () => void;
+    /** Milestone numbers to celebrate */
+    milestones?: number[];
+    /** Callback when a milestone is reached */
+    onMilestone?: (milestone: number) => void;
+    /** Size variant */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** Show the timer bar */
+    showTimer?: boolean;
+    /** Show the multiplier badge */
+    showMultiplier?: boolean;
+    /** Visual intensity level */
+    intensity?: "low" | "medium" | "high" | "extreme";
+    /** Enable animations */
+    animated?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Sound effect hooks */
+    onPlayIncrementSound?: () => void;
+    onPlayMilestoneSound?: () => void;
+    onPlayBreakSound?: () => void;
+}
+export declare function WakaComboCounter({ combo, multiplier, maxMultiplier, timeRemaining, onComboBreak, milestones, onMilestone, size, showTimer, showMultiplier, intensity, animated, className, onPlayIncrementSound, onPlayMilestoneSound, onPlayBreakSound, }: WakaComboCounterProps): import("react/jsx-runtime").JSX.Element;
+export interface UseComboCounterOptions {
+    initialCombo?: number;
+    initialMultiplier?: number;
+    maxMultiplier?: number;
+    timerDuration?: number;
+    multiplierThresholds?: number[];
+    autoDecay?: boolean;
+    decayRate?: number;
+}
+export interface UseComboCounterReturn {
+    combo: number;
+    multiplier: number;
+    timeRemaining: number;
+    increment: (amount?: number) => void;
+    reset: () => void;
+    pause: () => void;
+    resume: () => void;
+    isPaused: boolean;
+}
+export declare function useComboCounter({ initialCombo, initialMultiplier, maxMultiplier, timerDuration, multiplierThresholds, autoDecay, decayRate, }?: UseComboCounterOptions): UseComboCounterReturn;

package/dist/components/waka-combobox/index.d.ts

@@ -0,0 +1,81 @@
+import * as React from "react";
+export interface ComboboxOption<T = string> {
+    /** Valeur unique de l'option */
+    value: T;
+    /** Libellé affiché */
+    label: string;
+    /** Description secondaire */
+    description?: string;
+    /** Icône */
+    icon?: React.ReactNode;
+    /** Désactiver l'option */
+    disabled?: boolean;
+    /** Groupe de l'option */
+    group?: string;
+}
+export interface WakaComboboxProps<T = string> {
+    /** Options disponibles */
+    options: ComboboxOption<T>[];
+    /** Valeur sélectionnée (single) ou valeurs (multiple) */
+    value?: T | T[];
+    /** Callback lors du changement */
+    onChange?: (value: T | T[] | undefined) => void;
+    /** Placeholder */
+    placeholder?: string;
+    /** Placeholder de recherche */
+    searchPlaceholder?: string;
+    /** Message si aucune option */
+    emptyMessage?: string;
+    /** Mode multiple */
+    multiple?: boolean;
+    /** Permettre la création de nouvelles options */
+    creatable?: boolean;
+    /** Callback lors de la création */
+    onCreate?: (inputValue: string) => ComboboxOption<T> | Promise<ComboboxOption<T>>;
+    /** Texte du bouton de création */
+    createLabel?: string;
+    /** Recherche asynchrone */
+    onSearch?: (query: string) => Promise<ComboboxOption<T>[]>;
+    /** Délai de debounce pour la recherche (ms) */
+    searchDebounce?: number;
+    /** Désactivé */
+    disabled?: boolean;
+    /** Erreur */
+    error?: boolean;
+    /** Chargement */
+    loading?: boolean;
+    /** Taille */
+    size?: "sm" | "md" | "lg";
+    /** Permettre de vider la sélection */
+    clearable?: boolean;
+    /** Nombre maximum de sélections (multiple) */
+    maxSelections?: number;
+    /** Classes CSS additionnelles */
+    className?: string;
+    /** ID pour l'accessibilité */
+    id?: string;
+    /** Nom du champ */
+    name?: string;
+}
+export declare function WakaCombobox<T = string>({ options: initialOptions, value, onChange, placeholder, searchPlaceholder, emptyMessage, multiple, creatable, onCreate, createLabel, onSearch, searchDebounce, disabled, error, loading: externalLoading, size, clearable, maxSelections, className, id, name, }: WakaComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface UseComboboxOptions<T = string> {
+    /** Options initiales */
+    options?: ComboboxOption<T>[];
+    /** Valeur initiale */
+    initialValue?: T | T[];
+    /** Mode multiple */
+    multiple?: boolean;
+}
+export declare function useCombobox<T = string>(options?: UseComboboxOptions<T>): {
+    value: T | T[];
+    onChange: React.Dispatch<React.SetStateAction<T | T[]>>;
+    options: ComboboxOption<T>[];
+    setOptions: React.Dispatch<React.SetStateAction<ComboboxOption<T>[]>>;
+    clear: () => void;
+    addOption: (option: ComboboxOption<T>) => void;
+    removeOption: (valueToRemove: T) => void;
+    selectAll: () => void;
+    selectNone: () => void;
+    multiple: boolean;
+};
+export default WakaCombobox;

package/dist/components/waka-command-bar/index.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+export interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    shortcut?: string[];
+    category?: string;
+    action?: () => void;
+    href?: string;
+    keywords?: string[];
+}
+export interface CommandCategory {
+    id: string;
+    label: string;
+    items: CommandItem[];
+}
+export interface WakaCommandBarProps {
+    /** Whether the command bar is open */
+    open: boolean;
+    /** Callback when open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Command items or categories */
+    items: CommandItem[] | CommandCategory[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Called when an item is selected */
+    onSelect?: (item: CommandItem) => void;
+    /** Custom empty state */
+    emptyMessage?: string;
+    /** Show recent items */
+    recentItems?: CommandItem[];
+    /** Custom footer content */
+    footer?: React.ReactNode;
+    /** Keyboard shortcut to open (default: cmd+k) */
+    shortcut?: string[];
+}
+export declare function WakaCommandBar({ open, onOpenChange, items, placeholder, onSelect, emptyMessage, recentItems, footer, shortcut, }: WakaCommandBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function useCommandBar(): {
+    open: boolean;
+    onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+    openCommandBar: () => void;
+    closeCommandBar: () => void;
+    toggleCommandBar: () => void;
+};

package/dist/components/waka-compare-period/index.d.ts

@@ -0,0 +1,122 @@
+import * as React from "react";
+export type PeriodPreset = "last_week" | "last_month" | "last_quarter" | "last_year" | "custom";
+export type TrendDirection = "up" | "down" | "neutral";
+export interface PeriodRange {
+    /** Start date of the period */
+    start: Date;
+    /** End date of the period */
+    end: Date;
+    /** Optional label for display */
+    label?: string;
+}
+export interface MetricValue {
+    /** Current period value */
+    current: number;
+    /** Previous period value */
+    previous: number;
+}
+export interface Metric {
+    /** Unique identifier for the metric */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Metric values for current and previous periods */
+    value: MetricValue;
+    /** Format function for displaying the value */
+    format?: (value: number) => string;
+    /** Unit suffix (e.g., "%", "k", "ms") */
+    unit?: string;
+    /** Invert trend colors (lower is better) */
+    invertTrend?: boolean;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /** Color theme for the metric */
+    color?: "default" | "blue" | "green" | "purple" | "orange" | "red";
+}
+export interface ComparePeriodSummary {
+    /** Total metrics improving */
+    improving: number;
+    /** Total metrics declining */
+    declining: number;
+    /** Total metrics unchanged */
+    unchanged: number;
+    /** Average percentage change */
+    averageChange: number;
+    /** Best performing metric ID */
+    bestMetricId?: string;
+    /** Worst performing metric ID */
+    worstMetricId?: string;
+}
+export interface WakaComparePeriodProps {
+    /** Array of metrics to compare */
+    metrics: Metric[];
+    /** Current period range */
+    currentPeriod: PeriodRange;
+    /** Previous period range */
+    previousPeriod: PeriodRange;
+    /** Selected period preset */
+    periodPreset?: PeriodPreset;
+    /** Callback when period preset changes */
+    onPeriodChange?: (preset: PeriodPreset, current: PeriodRange, previous: PeriodRange) => void;
+    /** Show period selector dropdown */
+    showPeriodSelector?: boolean;
+    /** Show visual comparison bars */
+    showComparisonBars?: boolean;
+    /** Show summary statistics */
+    showSummary?: boolean;
+    /** Enable animated value transitions */
+    animated?: boolean;
+    /** Layout variant */
+    variant?: "grid" | "list" | "compact";
+    /** Number of columns for grid layout */
+    columns?: 2 | 3 | 4;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function WakaComparePeriod({ metrics, currentPeriod, previousPeriod, periodPreset, onPeriodChange, showPeriodSelector, showComparisonBars, showSummary, animated, variant, columns, className, }: WakaComparePeriodProps): import("react/jsx-runtime").JSX.Element;
+export interface UseComparePeriodOptions {
+    /** Initial period preset */
+    initialPreset?: PeriodPreset;
+    /** Initial metrics data */
+    initialMetrics?: Metric[];
+    /** Reference date for calculations */
+    referenceDate?: Date;
+    /** Auto-refresh interval in milliseconds */
+    autoRefreshInterval?: number;
+    /** Callback to fetch new metric data */
+    onRefresh?: () => Promise<Metric[]>;
+}
+export interface UseComparePeriodReturn {
+    /** Current period preset */
+    preset: PeriodPreset;
+    /** Current period range */
+    currentPeriod: PeriodRange;
+    /** Previous period range */
+    previousPeriod: PeriodRange;
+    /** Metrics array */
+    metrics: Metric[];
+    /** Calculated summary */
+    summary: ComparePeriodSummary;
+    /** Loading state */
+    isLoading: boolean;
+    /** Error state */
+    error: Error | null;
+    /** Set period preset */
+    setPreset: (preset: PeriodPreset) => void;
+    /** Set custom period ranges */
+    setCustomPeriods: (current: PeriodRange, previous: PeriodRange) => void;
+    /** Update metrics data */
+    setMetrics: React.Dispatch<React.SetStateAction<Metric[]>>;
+    /** Update a single metric */
+    updateMetric: (id: string, value: MetricValue) => void;
+    /** Trigger manual refresh */
+    refresh: () => Promise<void>;
+    /** Get change for a specific metric */
+    getMetricChange: (id: string) => {
+        percentage: number;
+        absolute: number;
+        direction: TrendDirection;
+    } | null;
+}
+export declare function useComparePeriod(options?: UseComparePeriodOptions): UseComparePeriodReturn;
+export default WakaComparePeriod;

package/dist/components/waka-config-comparator/index.d.ts

@@ -0,0 +1,37 @@
+export interface ConfigValue {
+    key: string;
+    value: string | number | boolean | null;
+    type?: "string" | "number" | "boolean" | "null";
+}
+export interface ConfigEnvironment {
+    id: string;
+    name: string;
+    values: ConfigValue[];
+}
+export type DiffType = "added" | "removed" | "modified" | "unchanged";
+export interface ConfigDiff {
+    key: string;
+    leftValue?: string | number | boolean | null;
+    rightValue?: string | number | boolean | null;
+    diffType: DiffType;
+}
+export interface WakaConfigComparatorProps {
+    /** List of environments to compare */
+    environments: ConfigEnvironment[];
+    /** Left environment ID */
+    leftEnvId?: string;
+    /** Right environment ID */
+    rightEnvId?: string;
+    /** Callback when environment selection changes */
+    onEnvironmentChange?: (left: string, right: string) => void;
+    /** Callback when copying value */
+    onCopyValue?: (key: string, value: unknown, fromEnv: string, toEnv: string) => void;
+    /** Show only differences */
+    showDiffsOnly?: boolean;
+    /** Title */
+    title?: string;
+    /** Custom class name */
+    className?: string;
+}
+export declare function WakaConfigComparator({ environments, leftEnvId: initialLeftId, rightEnvId: initialRightId, onEnvironmentChange, onCopyValue, showDiffsOnly: initialShowDiffsOnly, title, className, }: WakaConfigComparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultConfigEnvironments: ConfigEnvironment[];