import React, { type ReactElement } from 'react';
import type { View } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import { type BoxProps } from './Box';
export type GroupDirection = 'horizontal' | 'vertical';
export type GroupBaseProps<BoxProps> = BoxProps & {
  /** Accessibility label describing the group of items. */
  accessibilityLabel?: string;
  /** Items to render in a group. */
  children?: React.ReactNode;
  /** Direction a group of components should flow.
   * @default vertical
   */
  direction?: GroupDirection;
  /** Divider Component to include between each item in a group. */
  divider?: React.ComponentType<React.PropsWithChildren<unknown>> | null;
  /** Gap to insert between siblings. */
  gap?: ThemeVars.Space;
  /** Control the layout of each item in a group.
   * @default Box component for given platform
   * @example
   * ```
   * renderItem={({item, Wrapper, index}) => {
   *  return <Wrapper borderedTop={index === 0}>{item}</Wrapper>
   * }}
   * ```
   */
  renderItem?: (info: {
    Wrapper: React.ComponentType<React.PropsWithChildren<BoxProps>>;
    item: ReactElement | string | number;
    index: number;
    isFirst: boolean;
    isLast: boolean;
  }) => ReactElement | string | number;
};
export type RenderGroupItem = GroupBaseProps<BoxProps>['renderItem'];
export type GroupProps = GroupBaseProps<BoxProps>;
/**
 * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
 * @deprecationExpectedRemoval v8
 * @danger Make sure to add a `key` prop to each item.
 */
export declare const Group: React.NamedExoticComponent<
  import('@coinbase/cds-common').SharedProps &
    import('../styles/styleProps').StyleProps & {
      children?: React.ReactNode;
      style?: import('react-native').Animated.WithAnimatedValue<
        import('react-native').StyleProp<import('react-native').ViewStyle>
      >;
      animated?: boolean;
      elevation?: import('@coinbase/cds-common').ElevationLevels;
      font?: ThemeVars.FontFamily | 'inherit';
      pin?: import('@coinbase/cds-common').PinningDirection;
      bordered?: boolean;
      borderedTop?: boolean;
      borderedBottom?: boolean;
      borderedStart?: boolean;
      borderedEnd?: boolean;
      borderedHorizontal?: boolean;
      borderedVertical?: boolean;
      dangerouslySetBackground?: string;
    } & Omit<import('react-native').ViewProps, 'style'> & {
      /** Accessibility label describing the group of items. */
      accessibilityLabel?: string;
      /** Items to render in a group. */
      children?: React.ReactNode;
      /** Direction a group of components should flow.
       * @default vertical
       */
      direction?: GroupDirection;
      /** Divider Component to include between each item in a group. */
      divider?: React.ComponentType<React.PropsWithChildren<unknown>> | null;
      /** Gap to insert between siblings. */
      gap?: ThemeVars.Space;
      /** Control the layout of each item in a group.
       * @default Box component for given platform
       * @example
       * ```
       * renderItem={({item, Wrapper, index}) => {
       *  return <Wrapper borderedTop={index === 0}>{item}</Wrapper>
       * }}
       * ```
       */
      renderItem?:
        | ((info: {
            Wrapper: React.ComponentType<React.PropsWithChildren<BoxProps>>;
            item: ReactElement | string | number;
            index: number;
            isFirst: boolean;
            isLast: boolean;
          }) => ReactElement | string | number)
        | undefined;
    } & {
      ref?: React.Ref<View>;
    }
>;
//# sourceMappingURL=Group.d.ts.map