@nimbus-ds/patterns 1.39.0-rc.1 → 1.39.0

package/dist/index.d.ts

@@ -425,22 +425,9 @@ export type DataTableCellProps = DataTableCellProperties & Omit<HTMLAttributes<H
 declare const DataTableCell: React.FC<DataTableCellProps>;
 export interface DataTableDropdownProperties {
 	/**
-	 * Placeholder text displayed in the default dropdown trigger button.
-	 * Required unless `trigger` is provided. Ignored when `trigger` is set.
+	 * Placeholder text displayed in the dropdown trigger button.
 	 */
-	placeholder?: string;
-	/**
-	 * Custom node to render as the dropdown trigger. When provided, replaces
-	 * the default trigger built from `placeholder`. Required unless
-	 * `placeholder` is provided.
-	 *
-	 * Must be a keyboard-accessible interactive element (e.g. `<button>`,
-	 * `<Link as="button">`, or `<a>`). Non-interactive nodes like `<span>`
-	 * or `<div>` will not receive keyboard focus and cannot open the
-	 * dropdown via keyboard.
-	 * @TJS-type React.ReactNode
-	 */
-	trigger?: ReactNode;
+	placeholder: string;
 	/**
 	 * Content to be rendered inside the dropdown popover.
 	 * Typically DataTable.DropdownAction and DataTable.DropdownDivider components.
@@ -1361,35 +1348,121 @@ export type InitialScreenProps = InitialScreenProperties & Omit<BoxProps, "width
  */
 export declare const InitialScreen: React.FC<InitialScreenProps> & InitialScreenComponents;
 export interface PlanDisplayCardProperties {
+	/**
+	 * Renders the card with the legacy featured treatment (primary 3px border and level-3 shadow).
+	 * New consumers should use `ribbonLabel` or `gradient` to express the intended emphasis.
+	 * Ignored when either of those props is provided.
+	 * @deprecated Use `ribbonLabel` or `gradient` instead. This prop will be removed in a future major release.
+	 */
 	highlighted?: boolean;
+	/**
+	 * Renders the card with the Plans 2.0 gradient background (primary-surface → neutral-background).
+	 * Ignored when `ribbonLabel` is provided.
+	 */
+	gradient?: boolean;
+	/**
+	 * Label shown in a ribbon on top of the card (e.g. "Más escogido"). When provided, the card
+	 * is rendered with the featured style (primary ribbon + 2px primary border, no shadow),
+	 * taking precedence over `gradient`.
+	 * @TJS-type React.ReactNode
+	 */
+	ribbonLabel?: ReactNode;
 }
 export type PlanDisplayCardProps = PropsWithChildren<PlanDisplayCardProperties> & Omit<BoxProps, "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "boxShadow">;
 declare const PlanDisplayCard: React.FC<PlanDisplayCardProps>;
-export type PlanDisplayCardHeaderProperties = {
+/**
+ * Properties of the plan display card header.
+ */
+export interface PlanDisplayCardHeaderProperties {
+	/**
+	 * Supporting text rendered above the title (e.g. the plan family name).
+	 */
 	subtitle: string;
+	/**
+	 * Main content of the header, typically the plan name and its price block.
+	 * @TJS-type React.ReactNode
+	 */
 	title: ReactNode;
-};
+	/**
+	 * Optional slot rendered to the right of the subtitle (e.g. a `<Tag>` like "Plan actual").
+	 * When provided, the subtitle row is laid out with space between the subtitle and the tag.
+	 * @TJS-type React.ReactNode
+	 */
+	tag?: ReactNode;
+}
 export type PlanDisplayCardHeaderProps = PropsWithChildren<PlanDisplayCardHeaderProperties>;
 declare const PlanDisplayCardHeader: React.FC<PlanDisplayCardHeaderProps>;
 export type PlanDisplayCardContentProperties = PropsWithChildren;
 declare const PlanDisplayCardContent: React.FC<PlanDisplayCardContentProperties>;
-export type PlanDisplayCardFooterProperties = PropsWithChildren;
-declare const PlanDisplayCardFooter: React.FC<PlanDisplayCardFooterProperties>;
+/**
+ * Properties of the plan display card footer.
+ */
+export interface PlanDisplayCardFooterProperties {
+	/**
+	 * Optional leading icon for an add-on style footer row (e.g. a point-of-sale icon next to a link).
+	 * When provided, the footer renders the icon and children side by side.
+	 * @TJS-type React.ReactNode
+	 */
+	icon?: ReactNode;
+}
+export type PlanDisplayCardFooterProps = PropsWithChildren<PlanDisplayCardFooterProperties>;
+declare const PlanDisplayCardFooter: React.FC<PlanDisplayCardFooterProps>;
 export type PlanDisplayCardSpacingProps = Omit<BoxProps, "children" | "borderTopWidth" | "borderColor" | "borderStyle" | "my">;
 declare const PlanDisplayCardSpacing: React.FC<PlanDisplayCardSpacingProps>;
-export type PlanDisplayBulletProperties = {
+/**
+ * Properties of the bullet used to display a single plan feature row.
+ */
+export interface PlanDisplayBulletProperties {
+	/**
+	 * Icon rendered to the left of the bullet text.
+	 * @TJS-type React.ReactNode
+	 */
 	icon: ReactNode;
+	/**
+	 * Renders the bullet with the disabled treatment, to show a feature the plan does not include.
+	 */
 	disabled?: boolean;
-};
+	/**
+	 * Optional slot rendered inline after the bullet text (e.g. a `<Tag>` like "Nuevo").
+	 * @TJS-type React.ReactNode
+	 */
+	badge?: ReactNode;
+}
 export type PlanDisplayBulletProps = PropsWithChildren<PlanDisplayBulletProperties>;
 declare const PlanDisplayBullet: React.FC<PlanDisplayBulletProps>;
+export type PlanDisplayCardPriceProperties = {
+	/**
+	 * The current price of the plan (e.g. "$999"). Rendered as the main, prominent value.
+	 * @TJS-type React.ReactNode
+	 */
+	price: ReactNode;
+	/**
+	 * Optional previous price, rendered with a line-through next to the current price.
+	 * @TJS-type React.ReactNode
+	 */
+	previousPrice?: ReactNode;
+	/**
+	 * Optional billing period suffix (e.g. "/mes") rendered next to the price.
+	 * @TJS-type React.ReactNode
+	 */
+	period?: ReactNode;
+	/**
+	 * Optional annual note rendered below the price (e.g. "R$696/año. Economiza R$132.").
+	 * Accepts a ReactNode so it can mix colors (e.g. an emphasized savings span).
+	 * @TJS-type React.ReactNode
+	 */
+	annualNote?: ReactNode;
+};
+export type PlanDisplayCardPriceProps = PlanDisplayCardPriceProperties;
+declare const PlanDisplayCardPrice: React.FC<PlanDisplayCardPriceProps>;
 /**
  * Interface representing the internal components used in the PlanDisplay.
  */
 export interface PlanDisplayComponents {
 	/**
 	 * The card component used to display the plan. This component is used to wrap the header, content, and footer components, and it is able
-	 * to receive a 'highlighted' prop to feature a plan.
+	 * to receive a 'ribbonLabel' and/or a 'gradient' prop to feature a plan. The legacy
+	 * 'highlighted' prop remains available temporarily for backwards compatibility.
 	 */
 	Card: typeof PlanDisplayCard;
 	/**
@@ -1397,6 +1470,10 @@ export interface PlanDisplayComponents {
 	 * an optional children where additional information can be displayed.
 	 */
 	Header: typeof PlanDisplayCardHeader;
+	/**
+	 * The price component of the plan display card. It renders the current price and optionally a previous price (with line-through), a billing period suffix and an annual note.
+	 */
+	Price: typeof PlanDisplayCardPrice;
 	/**
 	 * The content component of the plan display card. This component is used to display the main content of the plan, such as the plan bullet points.
 	 */