import React, { HTMLAttributes, PropsWithChildren } from 'react';
import type { ListItemProps } from '../list/ListItem/ListItem';
import type { BaseProps } from '../component-helpers';
import { type ButtonBaseProps } from '../Button';
import { type HeadingProps } from '../Heading';
/**
* 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> & HTMLAttributes;
type PricingOptionsLabelProps = PropsWithChildren<{
'data-testid'?: string;
}>;
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 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;
infoTooltip?: string;
/**
* Optional accessible label for the info tooltip trigger. Overrides the automatically generated label.
*/
infoTooltipAriaLabel?: 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 PricingOptionsActionsMessageProps = PropsWithChildren> & {
'data-testid'?: string;
leadingComponent?: React.ReactElement;
};
type PricingOptionsMenuActionProps = PropsWithChildren> & {
'data-testid'?: string;
};
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> & {
ActionsMessage: React.ForwardRefExoticComponent & 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>;
Label: ({ children }: PricingOptionsLabelProps) => React.JSX.Element;
Heading: React.ForwardRefExoticComponent & React.RefAttributes>;
Item: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>;
MenuAction: React.ForwardRefExoticComponent & React.RefAttributes>;
Price: React.ForwardRefExoticComponent & React.RefAttributes>;
PrimaryAction: React.ForwardRefExoticComponent & React.RefAttributes>;
SecondaryAction: React.ForwardRefExoticComponent & React.RefAttributes>;
testIds: {
root: string;
item: string;
labelRow: string;
heading: string;
label: string;
description: string;
price: string;
actionsMessage: string;
primaryAction: string;
secondaryAction: string;
menuAction: string;
featureList: string;
featureListHeading: string;
featureListItem: string;
featureListGroupHeading: string;
footnote: string;
};
};
export {};