import React from 'react';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { IconName } from '@coinbase/cds-common/types';
import { type SpringConfig, type SpringValue } from '@react-spring/web';
import type { IconProps } from '../icons/Icon';
import { type BoxDefaultElement, type BoxProps } from '../layout/Box';
import { type VStackBaseProps, type VStackProps } from '../layout/VStack';
import type { ResponsiveProp } from '../styles/styleProps';
/** Data that represents a single step within a Stepper.*/
export type StepperValue<Metadata extends Record<string, unknown> = Record<string, unknown>> = {
  /** A unique indetifier of the step. This is used to reference the Stepper's active step. */
  id: string;
  /** The text or ReactNode displayed within the Stepper's Label subcomponent. */
  label?: React.ReactNode;
  accessibilityLabel?: string;
  /** Optional step metadata which is passed to the the Stepper subcomponents. */
  metadata?: Metadata;
  subSteps?: StepperValue<Metadata>[];
  Component?: StepperStepComponent<Metadata> | null;
  StepperSubstepContainerComponent?: StepperSubstepContainerComponent<Metadata> | null;
  StepperIconComponent?: StepperIconComponent<Metadata> | null;
  StepperLabelComponent?: StepperLabelComponent<Metadata> | null;
  StepperProgressComponent?: StepperProgressComponent<Metadata> | null;
  StepperHeaderComponent?: StepperHeaderComponent<Metadata> | null;
};
/** Props shared by most of Stepper's subcomponents. */
type StepperSubcomponentProps<Metadata extends Record<string, unknown> = Record<string, unknown>> =
  {
    /** The step object being rendered. */
    step: StepperValue<Metadata>;
    /** The parent step of the step being rendered */
    parentStep: StepperValue<Metadata> | null;
    /** The id of the current active step. Can be null if no active step. */
    activeStepId: string | null;
    /** The depth/nesting level of this step (0 = root, 1 = first level sub-step, etc.) */
    depth: number;
    /** Whether the step is the current, active step */
    active: boolean;
    /** Whether the step has been visited */
    visited: boolean;
    /** An array of all step ids in the stepper */
    flatStepIds: string[];
    /** Whether the entire stepper is complete */
    complete?: boolean;
    /** Whether the active step is a descendent of this step */
    isDescendentActive: boolean;
    /** A CSS class name applied to this component */
    className?: string;
    /** Inline styles for the subcomponent element */
    style?: React.CSSProperties;
  };
export type StepperStepProps<Metadata extends Record<string, unknown> = Record<string, unknown>> =
  StepperSubcomponentProps<Metadata> &
    BoxProps<BoxDefaultElement> & {
      /**
       * An animated SpringValue between 0 and 1.
       * You can use this to animate your own custom Progress subcomponent.
       */
      progress: SpringValue<number>;
      activeStepLabelElement: HTMLElement | null;
      setActiveStepLabelElement: (element: HTMLElement) => void;
      progressSpringConfig?: SpringConfig;
      animate?: boolean;
      disableAnimateOnMount?: boolean;
      completedStepAccessibilityLabel?: string;
      StepperStepComponent?: StepperStepComponent<Metadata>;
      StepperSubstepContainerComponent?: StepperSubstepContainerComponent<Metadata> | null;
      StepperLabelComponent?: StepperLabelComponent<Metadata> | null;
      StepperProgressComponent?: StepperProgressComponent<Metadata> | null;
      StepperIconComponent?: StepperIconComponent<Metadata> | null;
      styles?: {
        step?: React.CSSProperties;
        label?: React.CSSProperties;
        progress?: React.CSSProperties;
        icon?: React.CSSProperties;
        header?: React.CSSProperties;
        substepContainer?: React.CSSProperties;
      };
      classNames?: {
        step?: string;
        label?: string;
        progress?: string;
        icon?: string;
        header?: string;
        substepContainer?: string;
      };
    };
export type StepperSubstepContainerProps<
  Metadata extends Record<string, unknown> = Record<string, unknown>,
> = StepperSubcomponentProps<Metadata> &
  BoxProps<BoxDefaultElement> & {
    children: React.ReactNode;
  };
export type StepperHeaderProps<Metadata extends Record<string, unknown> = Record<string, unknown>> =
  BoxProps<BoxDefaultElement> & {
    activeStep: StepperValue<Metadata> | null;
    flatStepIds: string[];
    complete?: boolean;
    className?: string;
    style?: React.CSSProperties;
  };
export type StepperLabelProps<Metadata extends Record<string, unknown> = Record<string, unknown>> =
  StepperSubcomponentProps<Metadata> &
    BoxProps<BoxDefaultElement> & {
      setActiveStepLabelElement: (element: HTMLElement) => void;
      defaultColor?: ResponsiveProp<ThemeVars.Color>;
      activeColor?: ResponsiveProp<ThemeVars.Color>;
      descendentActiveColor?: ResponsiveProp<ThemeVars.Color>;
      visitedColor?: ResponsiveProp<ThemeVars.Color>;
      completeColor?: ResponsiveProp<ThemeVars.Color>;
      completedStepAccessibilityLabel?: string;
    };
export type StepperProgressProps<
  Metadata extends Record<string, unknown> = Record<string, unknown>,
> = StepperSubcomponentProps<Metadata> &
  BoxProps<BoxDefaultElement> & {
    progress: SpringValue<number>;
    activeStepLabelElement: HTMLElement | null;
    progressSpringConfig?: SpringConfig;
    animate?: boolean;
    disableAnimateOnMount?: boolean;
    defaultFill?: ResponsiveProp<ThemeVars.Color>;
    activeFill?: ResponsiveProp<ThemeVars.Color>;
    descendentActiveFill?: ResponsiveProp<ThemeVars.Color>;
    completeFill?: ResponsiveProp<ThemeVars.Color>;
    visitedFill?: ResponsiveProp<ThemeVars.Color>;
  };
export type StepperIconProps<Metadata extends Record<string, unknown> = Record<string, unknown>> =
  StepperSubcomponentProps<Metadata> &
    Omit<IconProps, 'name'> & {
      name?: IconName;
      defaultName?: IconName;
      activeName?: IconName;
      descendentActiveName?: IconName;
      visitedName?: IconName;
      completeName?: IconName;
      defaultColor?: ResponsiveProp<ThemeVars.Color>;
      activeColor?: ResponsiveProp<ThemeVars.Color>;
      descendentActiveColor?: ResponsiveProp<ThemeVars.Color>;
      visitedColor?: ResponsiveProp<ThemeVars.Color>;
      completeColor?: ResponsiveProp<ThemeVars.Color>;
    };
export type StepperStepComponent<
  Metadata extends Record<string, unknown> = Record<string, unknown>,
> = React.FC<StepperStepProps<Metadata>>;
export type StepperSubstepContainerComponent<
  Metadata extends Record<string, unknown> = Record<string, unknown>,
> = React.FC<StepperSubstepContainerProps<Metadata>>;
export type StepperLabelComponent<
  Metadata extends Record<string, unknown> = Record<string, unknown>,
> = React.FC<StepperLabelProps<Metadata>>;
export type StepperProgressComponent<
  Metadata extends Record<string, unknown> = Record<string, unknown>,
> = React.FC<StepperProgressProps<Metadata>>;
export type StepperIconComponent<
  Metadata extends Record<string, unknown> = Record<string, unknown>,
> = React.FC<StepperIconProps<Metadata>>;
export type StepperHeaderComponent<
  Metadata extends Record<string, unknown> = Record<string, unknown>,
> = React.FC<StepperHeaderProps<Metadata>>;
export type StepperBaseProps<Metadata extends Record<string, unknown> = Record<string, unknown>> =
  VStackBaseProps & {
    /** An optional accessibility label used to announce a step as complete/visited. Useful for providing an internationalized label for this state.
     * @default "Complete"
     */
    completedStepAccessibilityLabel?: string;
    /** The orientation of the stepper. */
    direction: 'vertical' | 'horizontal';
    /**
     * An array of steps to render.
     * @see StepperValue
     */
    steps: StepperValue<Metadata>[];
    /**
     * The id of the current/active step.
     * Set this to null to visualize a completely unfilled/incomplete Stepper.
     */
    activeStepId: string | null;
    /** Set this to true to visualize a completely filled/complete Stepper */
    complete?: boolean;
    /** An optional component to render in place of the default Step subcomponent. */
    StepperStepComponent?: StepperStepComponent<Metadata>;
    /** An optional component to render in place of the default SubstepContainer subcomponent. */
    StepperSubstepContainerComponent?: StepperSubstepContainerComponent<Metadata> | null;
    /** An optional component to render in place of the default Label subcomponent. Set to null to render nothing in this slot. */
    StepperLabelComponent?: StepperLabelComponent<Metadata> | null;
    /** An optional component to render in place of the default Progress subcomponent. Set to null to render nothing in this slot. */
    StepperProgressComponent?: StepperProgressComponent<Metadata> | null;
    /** An optional component to render in place of the default Icon subcomponent. Set to null to render nothing in this slot. */
    StepperIconComponent?: StepperIconComponent<Metadata> | null;
    /** An optional component to render in place of the default Header subcomponent. Set to null to render nothing in this slot. */
    StepperHeaderComponent?: StepperHeaderComponent<Metadata> | null;
    /** The spring config to use for the progress spring. */
    progressSpringConfig?: SpringConfig;
    /** Whether to animate the progress spring.
     * @default true
     */
    animate?: boolean;
    /** Whether to disable the animation on mount. */
    disableAnimateOnMount?: boolean;
  };
export declare const stepperDefaultElement = 'div';
export type StepperDefaultElement = typeof stepperDefaultElement;
export type StepperProps<Metadata extends Record<string, unknown> = Record<string, unknown>> =
  VStackProps<StepperDefaultElement> &
    StepperBaseProps<Metadata> & {
      /** Custom styles for individual elements of the Stepper component */
      styles?: {
        /** Root Stepper container element */
        root?: React.CSSProperties;
        /** Step subcomponent element */
        step?: React.CSSProperties;
        /** Substep container element */
        substepContainer?: React.CSSProperties;
        /** Label subcomponent element */
        label?: React.CSSProperties;
        /** Progress subcomponent element */
        progress?: React.CSSProperties;
        /** Icon subcomponent element */
        icon?: React.CSSProperties;
        /** Header subcomponent element */
        header?: React.CSSProperties;
      };
      /** Custom class names for individual elements of the Stepper component */
      classNames?: {
        /** Root Stepper container element */
        root?: string;
        /** Step subcomponent element */
        step?: string;
        /** Substep container element */
        substepContainer?: string;
        /** Label subcomponent element */
        label?: string;
        /** Progress subcomponent element */
        progress?: string;
        /** Icon subcomponent element */
        icon?: string;
        /** Header subcomponent element */
        header?: string;
      };
    };
export declare const horizontalStepGap: {
  readonly phone: 0.5;
  readonly tablet: 1;
  readonly desktop: 1;
};
export declare const defaultProgressSpringConfig: {
  friction: number;
  tension: number;
  clamp: boolean;
};
type StepperComponent = <Metadata extends Record<string, unknown> = Record<string, unknown>>(
  props: StepperProps<Metadata> & {
    ref?: React.Ref<HTMLDivElement>;
  },
) => React.ReactElement;
export declare const Stepper: StepperComponent;
export {};
//# sourceMappingURL=Stepper.d.ts.map