/** Orientation of the stepper layout. */
export type UiStepperOrientation = 'horizontal' | 'vertical';

/**
 * A step-by-step navigation component for multi-step workflows. Use for
 * wizards, checkout flows, onboarding sequences, or any process with
 * sequential steps.
 * @category Navigation
 * @useCases wizard, checkout flow, onboarding, multi-step form, progress tracker
 * @keywords stepper, steps, wizard, progress, sequential, workflow, multi-step
 * @related UiProgress, UiTabs
 */
export type UiStepperProps = {
  /**
   * The controlled value of the active step.
   * - Omit for uncontrolled mode (uses defaultValue)
   * - Use `v-model` for controlled mode
   * @example
   * ```vue
   * <!-- Uncontrolled -->
   * <UiStepper :default-value="1">...</UiStepper>
   *
   * <!-- Controlled -->
   * <UiStepper v-model="currentStep">...</UiStepper>
   * ```
   */
  modelValue?: number;
  /**
   * The step that should be active when initially rendered (uncontrolled mode).
   * @default 1
   */
  defaultValue?: number;
  /** The orientation of the stepper layout. */
  orientation?: UiStepperOrientation;
  /**
   * Whether navigation must be sequential (user cannot skip ahead to incomplete steps).
   * @default true
   */
  linear?: boolean;
};

/**
 * Props for the UiStepperTrigger component.
 */
export type UiStepperTriggerProps = {
  /**
   * Renders as the child element instead of the default trigger button.
   * Use with UiButton to customize the trigger appearance.
   * @default false
   */
  asChild?: boolean;
};

/**
 * Props for the UiStepperItem component.
 */
export type UiStepperItemProps = {
  /** The step number this item represents (required). */
  step: number;
  /** Whether this step is disabled and cannot be navigated to. */
  disabled?: boolean;
  /** Whether this step is marked as completed. */
  completed?: boolean;
};
