import React, { PropsWithChildren } from 'react'; import type { ListItemProps } from '../list/ListItem/ListItem'; import type { BaseProps } from '../component-helpers'; import { ButtonBaseProps, HeadingProps, LabelProps } from '..'; /** * Design tokens */ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css'; import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css'; type AlignOptions = 'start' | 'center'; export type PricingOptionsProps = { align?: AlignOptions; variant?: 'default' | 'default-gradient' | 'cards' | 'cards-gradient'; ['data-testid']?: string; } & PropsWithChildren>; export type PricingOptionsItem = { ['data-testid']?: string; /** * Escape-hatch for inserting custom React components. * Warning: * This prop isn't advertised in our docs but remains part of the public API for edge-cases. * Need to use this prop? Please check in with #primer-brand first to confirm correct usage. */ leadingComponent?: React.ReactElement; } & PropsWithChildren>; type PricingOptionsLabelProps = PropsWithChildren> & { 'data-testid'?: string; } & LabelProps; type PricingOptionsDescriptionProps = PropsWithChildren> & { 'data-testid'?: string; }; type PricingOptionsHeadingProps = PropsWithChildren> & { 'data-testid'?: string; } & HeadingProps; type PricingOptionsPriceProps = PropsWithChildren> & { currencyCode?: string; currencySymbol?: string; 'data-testid'?: string; originalPrice?: string; trailingText?: string; }; type PricingOptionsFeatureListProps = BaseProps & { accordionAs?: HeadingProps['as']; expanded?: ExpandedProp; hasDivider?: boolean; children: React.ReactElement[]; 'data-testid'?: string; }; type ExpandedProp = boolean | ResponsiveExpandableProps; type ResponsiveExpandableProps = { narrow: boolean; regular: boolean; wide: boolean; }; type PricingOptionsFeatureListHeadingProps = PropsWithChildren> & { 'data-testid'?: string; }; type PricingOptionsFeatureListGroupHeadingProps = PropsWithChildren> & { as?: Exclude; 'data-testid'?: string; }; type PricingOptionsFeatureListItemProps = PropsWithChildren> & { 'data-testid'?: string; variant?: 'included' | 'excluded'; } & Omit; type AsA = { as: 'a'; href: string; 'data-testid'?: string; } & React.AnchorHTMLAttributes> & ButtonBaseProps; type AsButton = { as: 'button'; 'data-testid'?: string; } & React.ButtonHTMLAttributes> & ButtonBaseProps; type PricingOptionsActionsProps = AsA | AsButton; type PricingOptionsFootnoteProps = PropsWithChildren> & { 'data-testid'?: string; }; /** * Pricing options component: * {@link https://primer.style/brand/components/PricingOptions/ See usage examples}. */ export declare const PricingOptions: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes> & { Description: React.ForwardRefExoticComponent & React.RefAttributes>; FeatureList: React.ForwardRefExoticComponent & React.RefAttributes>; FeatureListHeading: React.ForwardRefExoticComponent & React.RefAttributes>; FeatureListGroupHeading: React.ForwardRefExoticComponent & React.RefAttributes>; FeatureListItem: React.ForwardRefExoticComponent & React.RefAttributes>; Footnote: React.ForwardRefExoticComponent & React.RefAttributes>; Heading: React.ForwardRefExoticComponent & React.RefAttributes>; Item: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; Label: React.ForwardRefExoticComponent & React.RefAttributes>; Price: React.ForwardRefExoticComponent & React.RefAttributes>; PrimaryAction: React.ForwardRefExoticComponent & React.RefAttributes>; SecondaryAction: React.ForwardRefExoticComponent & React.RefAttributes>; testIds: { root: string; item: string; heading: string; label: string; description: string; price: string; primaryAction: string; secondaryAction: string; featureList: string; featureListHeading: string; featureListItem: string; featureListGroupHeading: string; footnote: string; }; }; export {};