PricingPlans

type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";

interface PricingPlanItem {
    /**
     * Identity for this plan — the list key, and what you match on in a `select` handler. Falls back
     * to `title`, then to the index.
     */
    value?: string | number;
}

interface PricingPlanProps {
    /**
     * The plan's name — 'Free', 'Pro', 'Enterprise'.
     */
    title?: string;

    /**
     * One line on who the plan is for, under the name — and in `layout="compact"`, on its own line
     * where the feature list would otherwise be.
     */
    description?: string;

    /**
     * A pill beside the name, for 'Most popular' or 'Save 20%'. A bare string uses the plan's own
     * `color`; pass an object to set the pill's color yourself.
     */
    badge?: string | PricingPlanBadge;

    /**
     * The headline figure, formatted however you want it ('$29', '€29', 'Free', 'Custom') — the
     * component never formats a number, since currency and locale are the app's to decide.
     */
    price?: string;

    /**
     * The price this plan is *currently* going for, when that's less than `price`. Setting it strikes
     * `price` out and promotes this to the headline figure — so a plan on offer sets both, and
     * `price` alone is the regular case.
     */
    discount?: string;

    /**
     * What the price buys, printed right after it — '/month', '/seat', '/1,000 credits'.
     */
    billingCycle?: string;

    /**
     * When the money actually moves, under the price — 'billed annually', 'billed monthly'. This is
     * the line that keeps an annual-discounted price honest. `layout="compact"` has no room for a
     * second line under the price, so it hangs this off an `Info` popover beside the billing cycle
     * rather than printing it.
     */
    billingPeriod?: string;

    /**
     * What the plan includes, as a `CheckList`. A bare string is a checked item; an object is a full
     * `CheckListItem`, so `checked: false` marks what this plan leaves out and `description` adds a
     * second line under a feature. Not rendered by `layout="compact"`, which shows the plan's
     * `description` in that space instead.
     */
    features?: (string | CheckListItem)[];

    /**
     * The call to action under the features. Omit it for a plan that isn't self-serve, or replace
     * the whole block with the `footer` slot.
     */
    button?: PricingPlanButton;

    /**
     * Small print under the button — 'No credit card required', 'Prices exclude VAT'.
     */
    terms?: string;

    /**
     * Marks this as the recommended plan: the card keeps its `variant` and takes the plan's `color`
     * — a tinted `subtle` or `soft` card, a coloured `outline` ring. The button follows too, taking
     * that `color` and going `solid` — the rest stay `neutral` and `subtle` — unless it sets its own.
     * @defaultValue false
     */
    highlight?: boolean;

    /**
     * Grows the card slightly above its neighbours from the `md` breakpoint up. Only worth it beside
     * other plans — `PricingPlans` applies it to the highlighted plan for you.
     * @defaultValue false
     */
    scale?: boolean;

    /**
     * Which way the card runs. `vertical` is the usual one in a row of plans; `horizontal` puts the
     * price and button beside the features instead, for a plan that stands on its own — a single
     * lifetime deal, an add-on above a comparison table. Both densities have both directions: a
     * `compact` `horizontal` plan is the one-line switcher row, a `compact` `vertical` one is a
     * small card that still fits a lineup.
     * @defaultValue 'vertical'
     */
    orientation?: "vertical" | "horizontal";

    /**
     * The accent color: the highlighted card, the feature checkmarks, an unstyled `badge`, and the
     * button on the highlighted plan — every other plan's button is `neutral`.
     * @defaultValue 'primary'
     */
    color?: Color;

    /**
     * The density. `compact` tightens the padding, drops the type a size, shows the plan's
     * `description` in place of its feature checklist and moves `billingPeriod` into an `Info`
     * beside the billing cycle — for a plan switcher inside a settings panel, where the pricing page
     * has already done the selling. Combines with `orientation`: horizontal gives the one-line row,
     * vertical a small card.
     * @defaultValue 'default'
     */
    layout?: "default" | "compact";

    /**
     * The card's surface, named after `Card`'s variants. `subtle` is a raised panel with a faint
     * ring; `soft` a flat tint with no ring, for plans sitting on an already-busy page; `outline`
     * the page background with only the ring, the quietest of the three. A highlighted plan keeps its
     * variant and only changes colour, to the plan's `color`.
     * @defaultValue 'subtle'
     */
    variant?: "subtle" | "soft" | "outline";
}