@bunnyapp/components 1.8.5 → 2.0.0-beta.1

package/dist/cjs/types/src/ui/appearance/types.d.ts

@@ -0,0 +1,531 @@
+/**
+ * The values the default look is built from: set one when a change should carry through everything
+ * built from it. The ones the payment provider's hosted fields have too are handed to them as they are.
+ * Every variable is optional, and literal values only (no `var()`).
+ */
+export type AppearanceVariables = {
+    /**
+     * The primary button, text links, the selected payment method, focused borders, the loading spinner.
+     * Its hover and pressed shades and the default focus ring are derived from it, so use a plain color.
+     * @default your Bunny brand color
+     */
+    colorPrimary?: string;
+    /**
+     * The text and icon colour on `colorPrimary` surfaces: the primary button's label, a ticked checkbox's
+     * tick, the plan picker's ticks. Set it when `colorPrimary` is light.
+     * @default `'#fff'`
+     */
+    colorOnPrimary?: string;
+    /**
+     * The form column, inputs and payment method tiles.
+     * @default `'#ffffff'`
+     */
+    colorBackground?: string;
+    /**
+     * Body text and input text. The other text and fill greys are fainter steps of it, so a plain color (hex,
+     * `rgb()` or `hsl()`) keeps them in step.
+     * @default `'rgba(0,0,0,0.88)'`
+     */
+    colorText?: string;
+    /**
+     * Muted text: the "Subscribe to" line, footer links, the back link; when set, also its arrow and the download icon.
+     * @default `colorText`'s color at 65% opacity (`'rgba(0,0,0,0.65)'`)
+     */
+    colorTextSecondary?: string;
+    /**
+     * Placeholders, the empty country select and its chevron.
+     * @default `colorText`'s color at 25% opacity (`'rgba(0,0,0,0.25)'`)
+     */
+    colorTextPlaceholder?: string;
+    /**
+     * Invalid field borders and error messages.
+     * @default `'#ff4d4f'`
+     */
+    colorDanger?: string;
+    /**
+     * Discount amounts and the success check (its tint and strong shade are derived from it, so use a plain color).
+     * @default `'#52c41a'`
+     */
+    colorSuccess?: string;
+    /**
+     * Warnings. Handed to the payment provider only when you set it.
+     * @default `'#faad14'`
+     */
+    colorWarning?: string;
+    /**
+     * All text on the screen, the payment fields included. Set the font here once and list any web font in
+     * `fonts`: it is loaded onto the page and into the payment fields. When set, content you render inside
+     * `BunnyProvider` gets it too. Leave it unset to inherit your page's font.
+     * @default `'inherit'` (your page's font)
+     */
+    fontFamily?: string;
+    /**
+     * Body, input and button text. On phones, input text is raised to 16px when this is a smaller `px` value.
+     * @default `'14px'`
+     */
+    fontSizeBase?: string;
+    /**
+     * The smallest step of the text scale. Handed to the payment provider only when you set it.
+     * @default `'11px'`
+     */
+    fontSizeXs?: string;
+    /**
+     * The text scale's step below `fontSizeBase`. Handed to the payment provider only when you set it.
+     * @default `'12px'`
+     */
+    fontSizeSm?: string;
+    /**
+     * The text scale's step above `fontSizeBase`. Handed to the payment provider only when you set it.
+     * @default `'16px'`
+     */
+    fontSizeLg?: string;
+    /**
+     * The text scale's largest step below page titles. Handed to the payment provider only when you set it.
+     * @default `'20px'`
+     */
+    fontSizeXl?: string;
+    /**
+     * The weight of regular text. Handed to the payment provider only when you set it.
+     * @default `'400'`
+     */
+    fontWeightNormal?: string;
+    /**
+     * The weight of emphasised text. Handed to the payment provider only when you set it.
+     * @default `'500'`
+     */
+    fontWeightMedium?: string;
+    /**
+     * The weight of headings. Handed to the payment provider only when you set it.
+     * @default `'600'`
+     */
+    fontWeightBold?: string;
+    /**
+     * Corner radius of controls. Cards keep 6px and tiles 8px until you set this, then your value applies
+     * to them too.
+     * @default `'4px'` for controls
+     */
+    borderRadius?: string;
+    /**
+     * Vertical space between form rows, ours and the payment fields'.
+     * @default `'12px'`
+     */
+    gridRowSpacing?: string;
+    /**
+     * The ring around a focused input or payment method.
+     * @default `0 0 0 2px` in a tint of `colorPrimary`
+     * @example '0 0 0 3px rgba(20, 83, 45, 0.25)'
+     */
+    focusBoxShadow?: string;
+    /**
+     * The secondary surface colour: the Signup/Checkout summary, the drawer body, UpgradeCheckout, the
+     * Subscriptions header band and the loading overlay.
+     * @default `'#f8fafc'`
+     */
+    colorBackgroundSecondary?: string;
+    /**
+     * Borders of inputs, payment method tiles and secondary buttons. Also colours dividers and the details
+     * list once set.
+     * @default `'rgb(226 232 240)'`
+     */
+    colorBorder?: string;
+    /**
+     * Width of dividers, rings and borders. Controls (inputs, buttons, checkboxes, payment tabs) are 1px
+     * until this is set, and keep their height (44px, 32px compact) whatever the width.
+     * @default `'2px'`
+     */
+    borderWidth?: string;
+};
+export type RuleProperty = 'color' | 'backgroundColor' | 'border' | 'borderTop' | 'borderRight' | 'borderBottom' | 'borderLeft' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'boxShadow' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'textTransform' | 'textDecoration' | 'transition' | 'outline' | 'outlineOffset';
+/** The style a selector shared with the payment provider's fields takes: the properties the provider accepts. */
+export type AppearanceSharedStyle = Partial<Record<RuleProperty, string>>;
+/** The style a Bunny-only selector takes. */
+export type AppearanceStyle = AppearanceSharedStyle & {
+    background?: string;
+    fontVariantNumeric?: string;
+    opacity?: string;
+    /** @deprecated Layout is not part of `appearance` and this will be removed: size the element around the component instead. */
+    maxWidth?: string;
+    /** @deprecated Layout is not part of `appearance` and this will be removed: size the element around the component instead. */
+    minHeight?: string;
+};
+/**
+ * One key per public selector: roles (with their states) and regions. Shared selectors take
+ * `AppearanceSharedStyle`, Bunny-only ones `AppearanceStyle`.
+ */
+export type AppearanceSelectorRules = {
+    /**
+     * Text inputs and the country select, on Bunny's fields and the payment provider's alike. There is no
+     * `height`: vertical padding + `lineHeight` + borders make it (44px by default), so raise the padding to grow both.
+     * @default `11px 12px` padding (`12px` less the border), `20px` line, 1px (`borderWidth` when set) solid `colorBorder`
+     */
+    '.Input'?: AppearanceSharedStyle;
+    /** A text input under the pointer. Forwarded to the payment provider. @default `colorPrimary`'s hover shade border */
+    '.Input:hover'?: AppearanceSharedStyle;
+    /**
+     * A focused text input, and a multi-select's field while its text input has the focus. Forwarded to the
+     * payment provider. @default `colorPrimary` border and `focusBoxShadow`
+     */
+    '.Input:focus'?: AppearanceSharedStyle;
+    /**
+     * A text input that failed validation. Forwarded to the payment provider. The default clears the focus ring:
+     * set `boxShadow` to give it one.
+     * @default `colorDanger` border, no shadow
+     */
+    '.Input--invalid'?: AppearanceSharedStyle;
+    /**
+     * A disabled text input or select, as while a form saves. Forwarded to the payment provider.
+     * @default `colorTextDisabled` text on `colorBackgroundDisabled`
+     */
+    '.Input:disabled'?: AppearanceSharedStyle;
+    /** Placeholder text. Forwarded to the payment provider. @default `colorTextPlaceholder` */
+    '.Input::placeholder'?: AppearanceSharedStyle;
+    /**
+     * The compact variant: Bunny's 32px inputs and selects where 44px would be too heavy (the coupon row, a
+     * list's search box, the billing details' form, the quote's forms). Weighs `.Input` plus the variant, so
+     * your `.Input` padding leaves them compact: restyle them here. Bunny only: never handed to the payment
+     * provider, whose fields have no compact size. Not scopable, like every `.Input` key.
+     * @default `5px 12px` padding (`6px` less the border)
+     */
+    '.Input--compact'?: AppearanceSharedStyle;
+    /**
+     * Field labels, on Bunny's fields and the payment provider's alike.
+     * @default 14px, weight 500, `colorText`, 6px below
+     */
+    '.Label'?: AppearanceSharedStyle;
+    /**
+     * Validation messages under a field, on Bunny's fields and the payment provider's alike.
+     * @default 14px, `colorDanger`
+     */
+    '.Error'?: AppearanceSharedStyle;
+    /**
+     * Payment method tiles: Bunny's own and the payment provider's tabs. Bunny's are the payment plugins,
+     * saved payment methods and "New card" in Signup, Checkout and the payment form (in a longer list they are
+     * rows of the same role), and the saved payment methods listed in the billing details.
+     * @default 1px (`borderWidth` when set) solid `colorBorder`, `colorBackground`, weight 500
+     */
+    '.Tab'?: AppearanceSharedStyle;
+    /** A payment method tile under the pointer. Forwarded to the payment provider. @default `colorPrimary`'s hover shade border */
+    '.Tab:hover'?: AppearanceSharedStyle;
+    /** The chosen payment method. Forwarded to the payment provider (its `color` also tints Stripe's tab icon). @default `colorPrimary` border and text */
+    '.Tab--selected'?: AppearanceSharedStyle;
+    /** A focused payment method tile, selected or not. Forwarded to the payment provider. @default `focusBoxShadow` */
+    '.Tab:focus'?: AppearanceSharedStyle;
+    /**
+     * The primary action (the pay button). Bunny only. Sized like `.Input`: change its height through `padding`.
+     * @default filled with `colorPrimary`, `11px 16px` padding (`12px` less the border)
+     */
+    '.Button'?: AppearanceStyle;
+    /** The primary button under the pointer. @default `colorPrimary`'s hover shade */
+    '.Button:hover'?: AppearanceStyle;
+    /** The primary button while pressed. @default `colorPrimary`'s pressed shade */
+    '.Button:active'?: AppearanceStyle;
+    /** The primary button when disabled. @default `rgba(113, 125, 148, 0.1)` fill */
+    '.Button:disabled'?: AppearanceStyle;
+    /**
+     * The compact variant: 32px primary buttons beside compact inputs and in toolbars (the quote's, the coupon
+     * row's Apply, a modal's actions). Weighs `.Button` plus the variant, so your `.Button` padding leaves them
+     * compact: restyle them here. Bunny only.
+     * @default `5px 12px` padding (`6px` less the border)
+     */
+    '.Button--compact'?: AppearanceStyle;
+    /**
+     * The summary column's content: header, amount, line items, totals. Bunny only. No default rule; the
+     * content is capped at `36rem` with `4rem` padding (`1.5rem` on phones): change the padding with `padding`.
+     */
+    '.Summary'?: AppearanceStyle;
+    /**
+     * The form column's content: the form, or the confirmation after checkout. Bunny only. No default rule;
+     * capped and padded like `.Summary`.
+     */
+    '.Form'?: AppearanceStyle;
+    /**
+     * Bordered secondary actions (Download, Fullscreen). A role of its own, not drawn on a `.Button`: a
+     * `.Button` rule does not reach it. Bunny only. Sized like `.Button`.
+     * @default 1px (`borderWidth` when set) solid `colorBorder`, `colorBackground`, `colorText`
+     */
+    '.ButtonSecondary'?: AppearanceStyle;
+    /** A secondary button under the pointer. @default `colorPrimary`'s hover shade, border and text */
+    '.ButtonSecondary:hover'?: AppearanceStyle;
+    /** A disabled secondary button. @default `colorBorder` border, disabled fill and text */
+    '.ButtonSecondary:disabled'?: AppearanceStyle;
+    /** The compact variant of `.ButtonSecondary`, like `.Button--compact`. Bunny only. @default `5px 12px` padding (`6px` less the border) */
+    '.ButtonSecondary--compact'?: AppearanceStyle;
+    /**
+     * All text: body text (table cells, line items, details), and under every other text role. A muted
+     * text, a heading, an amount and an overline are each a `.Text` with their own role on top
+     * (`.TextSecondary`, `.Heading`, `.Amount`, `.Overline`), so a `color` or `fontFamily` here reaches them
+     * all. A rule for one of those roles, yours or ours, beats this one, so a heading keeps its size and
+     * muted text its colour unless you set them on that role. Bunny only. Body text's sizes (a step down or
+     * up the scale) and emphasis are internal variants this rule reaches too.
+     * @default `colorText`, `fontSizeBase`, `fontWeightNormal`, `1.4` line
+     */
+    '.Text'?: AppearanceStyle;
+    /**
+     * Muted text: captions, hints, line item details. A `.Text` with this role on top. Bunny only. In the footer, the words
+     * "Powered by" are one, inside a `.Link` whose colour and size they take.
+     * @default `colorTextSecondary`
+     */
+    '.TextSecondary'?: AppearanceStyle;
+    /**
+     * Headings: a page's title, a section's, a card's or a table's. A `.Text` with this role on top, so it
+     * takes `.Text`'s colour unless you set one here. Bunny only. The levels below the first
+     * are internal variants (`fontSizeXl`, `fontSizeLg`), so a `fontSize` here resizes every level; scope it to a
+     * region to change one place (`'.Invoice .Heading'`).
+     * @default 30px, `fontWeightBold`, `1.27` line, no margin
+     */
+    '.Heading'?: AppearanceStyle;
+    /** Prices and totals. A `.Text` with this role on top. Bunny only. @default tabular figures, `fontWeightMedium` */
+    '.Amount'?: AppearanceStyle;
+    /** The one large amount of a screen, such as what is due. Bunny only. @default 30px, `fontWeightBold`, `1.25` line */
+    '.Amount--display'?: AppearanceStyle;
+    /** Small upper-case labels over a group or a column. A `.Text` with this role on top. Bunny only. @default `fontSizeXs`, `fontWeightMedium`, `colorTextSecondary`, uppercase, the surrounding line height */
+    '.Overline'?: AppearanceStyle;
+    /** The line between sections. Bunny only. @default a 1px light hairline top border (your `colorBorder` when you set it), `16px 0` margin */
+    '.Divider'?: AppearanceStyle;
+    /**
+     * Links: the footer's, and the buttons drawn as links ("Have a coupon code?", Cancel, Back, the table
+     * pager, "Add new contact"). Bunny only.
+     * @default `colorTextSecondary`, no underline; the buttons drawn as links are `colorPrimary` until you set a `color`
+     */
+    '.Link'?: AppearanceStyle;
+    /** A link under the pointer. Bunny only. @default `colorText` (`colorPrimary`'s hover shade for the buttons drawn as links) */
+    '.Link:hover'?: AppearanceStyle;
+    /**
+     * Tags: small pills labelling a state, such as an invoice's status or a saved payment method's `Default`
+     * and `Failed`. Bunny only. A state's colour (green for paid, red for overdue, ...) is an internal variant,
+     * so a `color` or `backgroundColor` here recolours every tag.
+     * @default `0 10px` padding (20px tall), pill radius, `fontSizeSm`, `fontWeightMedium`, `colorText` on a
+     * faint fill derived from `colorText`
+     */
+    '.Tag'?: AppearanceStyle;
+    /** Toggle switches, off. Bunny only. @default pill, a quarter-strength fill derived from `colorText` */
+    '.Switch'?: AppearanceStyle;
+    /** Toggle switches, on. Bunny only. @default `colorPrimary` */
+    '.Switch--checked'?: AppearanceStyle;
+    /** Checkboxes (the box; the label is `.Text`), unticked. Bunny only. @default 1px (`borderWidth` when set) solid `colorBorder`, `borderRadius`, `colorBackground` */
+    '.Checkbox'?: AppearanceStyle;
+    /** Ticked checkboxes. Bunny only. @default `colorPrimary` fill and border, a `colorOnPrimary` tick */
+    '.Checkbox--checked'?: AppearanceStyle;
+    /**
+     * A row of exclusive choices drawn as pills in a track, such as the billing period picker. The track.
+     * Bunny only. @default a light grey (a faint fill derived from `colorText` when you set `colorText` or `colorBackground`), `6px` corners (your `borderRadius` when you set it), `4px` padding
+     */
+    '.Segmented'?: AppearanceStyle;
+    /** One choice of a `.Segmented`. Bunny only. @default `0 7px` padding and a transparent 1px border (24px high), `fontSizeXs`, `fontWeightNormal`, `colorText`, no fill */
+    '.SegmentedOption'?: AppearanceStyle;
+    /** The chosen option of a `.Segmented`. Bunny only. @default `colorPrimary` fill, `colorOnPrimary` text */
+    '.SegmentedOption--selected'?: AppearanceStyle;
+    /** A `.SegmentedOption` under the pointer. Bunny only. @default `colorPrimaryHover` text */
+    '.SegmentedOption:hover'?: AppearanceStyle;
+    /** The chosen option under the pointer. Bunny only. @default `colorPrimaryHover` fill, `colorOnPrimary` text */
+    '.SegmentedOption--selected:hover'?: AppearanceStyle;
+    /** Stand-ins for content that is loading. Bunny only. @default `borderRadius`, a faint fill derived from `colorText` */
+    '.Skeleton'?: AppearanceStyle;
+    /**
+     * Raised surfaces that group content. Bunny only.
+     * @default `colorBackground`, `6px` (your `borderRadius` when you set it), the card shadow
+     */
+    '.Card'?: AppearanceStyle;
+    /** A card under the pointer. Bunny only. No default: a clickable card shows a `colorPrimary` hover ring. */
+    '.Card:hover'?: AppearanceStyle;
+    /** The chosen card of a group, such as a plan. Bunny only. @default a `borderWidth` `colorPrimary` ring */
+    '.Card--selected'?: AppearanceStyle;
+    /**
+     * The paper an invoice or a quote is drawn on. Bunny only. Set `boxShadow` here to change its shadow.
+     * @default `colorBackground`, `6px` (your `borderRadius` when you set it), the card shadow, `16px 0` padding
+     */
+    '.Document'?: AppearanceStyle;
+    /** A table's surface, on top of `.Card`. Set `boxShadow` here to change its shadow. Bunny only. No default rule. */
+    '.Table'?: AppearanceStyle;
+    /** A column header cell; drawn on top of `.TableCell`, so a `.TableCell` rule reaches it and a `.TableHeaderCell` rule wins. Bunny only. @default `colorText`, `fontWeightBold`, line height `1` */
+    '.TableHeaderCell'?: AppearanceStyle;
+    /** A row: its `backgroundColor` fills the row's cells. Bunny only. No default rule. */
+    '.TableRow'?: AppearanceStyle;
+    /** Every other row. Bunny only. @default a fainter fill derived from `colorText` */
+    '.TableRow--alternate'?: AppearanceStyle;
+    /** A cell, in the header and in the rows. Bunny only. @default `16px` padding, `fontSizeBase`, `colorText` */
+    '.TableCell'?: AppearanceStyle;
+    /**
+     * The invoice: its `.Document` and the payment form (its `.Tab`s, `.Input`s and `.Button`). Bunny only. A
+     * region: scope roles to it (`'.Invoice .Document'`).
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Invoice'?: AppearanceStyle;
+    /**
+     * The footer: "Terms", "Privacy" and the "Powered by" Bunny link, all `.Link`s (small and muted here). The
+     * words "Powered by" are a `.TextSecondary` (a `.Text` in the secondary role) that takes its link's colour
+     * but keeps `.Text`'s size. Bunny only. A region: `'.Footer .Link'` restyles only its links.
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Footer'?: AppearanceStyle;
+    /**
+     * The invoices list: its title (a `.Heading`), search bar (a compact `.Input`) and `.Table`. Bunny only. A
+     * region: `'.Invoices .Heading'` restyles only the title (by default `fontSizeBase`, line height `1`). The
+     * detail view a row opens is a `.Drawer` or `.Modal`, outside the region.
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Invoices'?: AppearanceStyle;
+    /** The quotes list, laid out like `.Invoices`. Bunny only. A region. @default `colorText`, `fontFamily`, `fontSizeBase` */
+    '.Quotes'?: AppearanceStyle;
+    /** The transactions list, laid out like `.Invoices`. Bunny only. A region. @default `colorText`, `fontFamily`, `fontSizeBase` */
+    '.Transactions'?: AppearanceStyle;
+    /**
+     * The quote: its `.Document`, `.Heading`s, `.Text` and `.Button`s. Bunny only. A region: `'.Quote .Button'`
+     * restyles only the quote's buttons. The accept and payment hold modals render outside it: style them
+     * through `.Modal`.
+     * @default `colorText`, `fontFamily`
+     */
+    '.Quote'?: AppearanceStyle;
+    /**
+     * The billing details: the company name (a `.Heading`), the form's `.Input`s and `.Button`s and the saved
+     * payment methods (`.Tab`s with their `.Tag`s and a menu each), on one surface. Bunny only. A region: `'.BillingDetails .Button'` restyles only its buttons, and
+     * `'.BillingDetails .Heading'` the company name (by default 18px, `fontWeightMedium`, line height `28px`).
+     * @default `colorBackground`, `borderRadius`, the card shadow, `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.BillingDetails'?: AppearanceStyle;
+    /**
+     * The subscriptions list: a `.Card` per subscription (its product a `.Heading`, its state a `.Tag`), the
+     * "Show inactive" `.Checkbox` and the `.ButtonSecondary` above the list. Bunny only. A region: space the
+     * cards with `'.Subscriptions .Card': { marginBottom }`.
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Subscriptions'?: AppearanceStyle;
+    /**
+     * The plan picker: the billing period's `.Segmented`, the plans (a `.Card` each, the plan's name its
+     * `.Heading` and its price an `.Amount--display`; on a desktop the plans are columns of one `.Card`),
+     * the feature comparison (`.Card`s of rows of `.Text`, group titles as `.Overline`), the add-on plans
+     * (`.Card`s) and the sticky checkout bar (a `.Card` with the total and the checkout `.Button`). Bunny only.
+     * A region: `'.Upgrade .Heading'` restyles the plan names, `'.Upgrade .Card--selected'` the chosen plan.
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Upgrade'?: AppearanceStyle;
+    /**
+     * A drawer's panel, such as the quantity editor or a list's detail view: its header (the title and the
+     * close button) over the content (`.Text`, `.Divider`s, `.Button`s). The title is always a `.Text`; a rule
+     * for the title alone is not supported yet (`'.Drawer .Text'` also reaches the content's text). Bunny only.
+     * A region: `'.Drawer .Button'` restyles only the drawers' buttons. The content sits on
+     * `colorBackgroundSecondary` under a hairline in the border colour.
+     * @default `colorBackground`, `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Drawer'?: AppearanceStyle;
+    /**
+     * A modal's panel, such as accepting a quote, approving a payment hold (with the payment form) or adding a
+     * contact: its title, the content and the `.Button`s under it. The title is always a strong `.Text`; a rule for the title alone is not supported
+     * yet (`'.Modal .Text'` also reaches the content's text). Bunny only. A region: `'.Modal .Button'`
+     * restyles only the modals' buttons.
+     * @default `colorBackground`, `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Modal'?: AppearanceStyle;
+};
+/**
+ * The regions: the root of each exported component and the areas several screens share (Signup's and
+ * Checkout's `.Summary` and `.Form`, the `.Drawer` and `.Modal` panels), styleable themselves and the only
+ * scopes a compound rule can name (`'.Summary .Button'`). An area inside one screen is not a region: it is
+ * reached through the screen's root (`'.Upgrade .Heading'`). The engine reads this list; it is not
+ * exported from the package.
+ */
+export declare const REGIONS: readonly [".Summary", ".Form", ".Invoice", ".Footer", ".Invoices", ".Quotes", ".Transactions", ".Quote", ".BillingDetails", ".Subscriptions", ".Upgrade", ".Drawer", ".Modal"];
+/** A region (see `REGIONS`). */
+export type AppearanceRegion = (typeof REGIONS)[number];
+/** What a compound rule can be scoped to. Only regions: adding a scope later is non-breaking, removing one is not. */
+type AppearanceScope = AppearanceRegion;
+/** A state on a selector: a pseudo-class (`:hover`, `::placeholder`) or a state suffix (`--selected`). */
+export type StateSuffix = `:${string}` | `--${string}`;
+/**
+ * The roots of the shared selectors: with their states, handed to the payment provider's fields too.
+ * Never scoped: a scoped shared rule would restyle our fields but not the payment provider's. The engine
+ * reads this list; it is not exported from the package.
+ */
+export declare const SHARED_ROOTS: readonly [".Input", ".Label", ".Error", ".Tab"];
+/** A shared selector's root (see `SHARED_ROOTS`). */
+export type SharedRoot = (typeof SHARED_ROOTS)[number];
+/**
+ * Variants only Bunny's controls have (`.Input--compact`): on a shared root too, they are never handed
+ * to the payment provider, whose fields have no such size. The engine reads this list; it is not
+ * exported from the package.
+ */
+export declare const LOCAL_VARIANTS: readonly ["--compact"];
+/** A Bunny-only variant (see `LOCAL_VARIANTS`). */
+export type LocalVariant = (typeof LOCAL_VARIANTS)[number];
+/**
+ * Roles drawn on top of another role's element, and that role: every text role is a `.Text` too. The
+ * engine weighs a rule for one of them as its role plus the role underneath, so its defaults (a
+ * heading's size) beat a `.Text` rule, yours or ours, and your rule for it beats both. It is not
+ * exported from the package.
+ */
+export declare const STACKED_ROLES: Readonly<Record<string, string>>;
+/** The selectors a region can scope: every Bunny-only role and its states, never a region or a key on a shared root. */
+type AppearanceScopable = Exclude<keyof AppearanceSelectorRules, AppearanceRegion | SharedRoot | `${SharedRoot}${StateSuffix}`>;
+/**
+ * Scoped rules: a Bunny-only role inside one region, such as `'.Summary .Button'` or
+ * `'.Summary .Button:hover'`. Bunny only: never forwarded to the payment provider. Inside the region
+ * a scoped rule beats the plain role rule (`.Button`), yours or ours, but not a state: scope the state
+ * too (`'.Summary .Button:hover'`). Outside the region it does nothing.
+ * Takes `AppearanceStyle`. Scoped keys carry no hover documentation of their own: read the plain
+ * role's and the region's.
+ */
+export type AppearanceScopedRules = {
+    [K in keyof AppearanceSelectorRules as K extends AppearanceScopable ? `${AppearanceScope} ${K}` : never]?: AppearanceStyle;
+};
+/**
+ * Selector → style override: every public selector (`AppearanceSelectorRules`) plus the scoped rules
+ * (`AppearanceScopedRules`).
+ */
+export type AppearanceRules = AppearanceSelectorRules & AppearanceScopedRules;
+/**
+ * A web font to use in `variables.fontFamily`: a stylesheet of `@font-face` rules, or one font file. It
+ * is loaded onto the page and into the payment fields (which render in an iframe), so your page needn't
+ * load it. System fonts need no entry.
+ */
+export type AppearanceFont = {
+    /** URL of a stylesheet of `@font-face` rules, such as a Google Fonts link. */
+    cssSrc: string;
+} | {
+    /** The name to use in `fontFamily`. */
+    family: string;
+    /** The font file, as a CSS `src` value: `url(https://...)`. */
+    src: string;
+    /** CSS `font-weight`, such as `'400'` or `'400 700'`. */
+    weight?: string;
+    /** CSS `font-style`. */
+    style?: 'normal' | 'italic' | 'oblique';
+    /** CSS `font-display`. */
+    display?: string;
+    /** CSS `unicode-range`. */
+    unicodeRange?: string;
+};
+/**
+ * Restyles Bunny's components: `variables` feed the default rules, your `rules` are merged over them
+ * selector by selector, and `fonts` are loaded onto the page and into the payment fields. Set it on `BunnyProvider` for every
+ * component, or on a component to restyle that one on top. The payment provider's hosted fields (Stripe's
+ * Payment Element) follow the shared rules too. See "Styling components" in the package README.
+ * @example
+ * <BunnyProvider
+ *   apiHost="..."
+ *   token={token}
+ *   appearance={{
+ *     variables: { colorPrimary: '#14532d', colorBackgroundSecondary: '#f6f1e7', borderRadius: '0px' },
+ *     rules: {
+ *       '.Label': { textTransform: 'uppercase', letterSpacing: '0.08em' },
+ *       '.Input:focus': { borderColor: '#14532d', boxShadow: '0 0 0 1px #14532d' },
+ *       '.Button': { backgroundColor: '#1c1917', padding: '14px 16px' },
+ *     },
+ *     fonts: [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600&display=swap' }],
+ *   }}
+ * >
+ *   ...
+ * </BunnyProvider>
+ */
+export type Appearance = {
+    /** The values the default rules are built from. */
+    variables?: AppearanceVariables;
+    /** Per-selector overrides, merged over the defaults property by property. Literal values only. */
+    rules?: AppearanceRules;
+    /**
+     * Web fonts for `variables.fontFamily`, loaded onto the page and into the payment fields. Set them once,
+     * up front: changing them after the payment form mounts remounts it and clears what was typed.
+     * @example [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap' }]
+     */
+    fonts?: AppearanceFont[];
+};
+export {};

package/dist/cjs/types/src/ui/appearance/variables.d.ts

@@ -0,0 +1,59 @@
+import type { AppearanceVariables } from './types';
+/** Every variable, plus the shades the default rules need that customers don't set. */
+type VariablesAndShades = Required<AppearanceVariables> & {
+    colorPrimaryHover: string;
+    colorPrimaryActive: string;
+    colorTextDisabled: string;
+    colorBackgroundDisabled: string;
+    colorBorderSecondary: string;
+    colorFill: string;
+    colorDivider: string;
+    colorSuccessBackground: string;
+    colorSuccessStrong: string;
+    boxShadowPane: string;
+    boxShadowPaneStacked: string;
+    boxShadowCard: string;
+    colorBackgroundAlternate: string;
+    /** Text on the page backdrop, from the branding's secondary colour. Customers reach it through a region rule. */
+    colorTextPage: string;
+    /** A light tint of `colorPrimary`, for selected and highlighted backgrounds. */
+    colorPrimaryBackground: string;
+    colorFillSecondary: string;
+    /** A strong fill from `colorText` (a quarter of it): the track of a switch that is off. */
+    colorFillStrong: string;
+    /** Text on a dark or `colorPrimary` fill. */
+    colorTextInverse: string;
+    /** The faintest text: icons beside a label (the download icon), the back link. */
+    colorTextMuted: string;
+    /** The stripe of every other row of the feature comparison. */
+    colorFillAlternate: string;
+    /** The track behind the billing period picker's options. */
+    colorFillTrack: string;
+};
+/** The variables and shades, plus values built from them that several rule sources share. */
+export type ResolvedVariables = VariablesAndShades & {
+    /** The corners of a surface (`.Card`, `.Document`): the customer's `borderRadius`, else 6px (the old `rounded-md`). */
+    borderRadiusCard: string;
+    /** The corners of a phone plan tile: the customer's `borderRadius`, else 8px (the old `rounded-lg`). */
+    borderRadiusTile: string;
+    /** The thin border of a dense control (the secondary buttons, the inputs in a modal form): the customer's `borderWidth`, else 1px. */
+    borderWidthHairline: string;
+    /** The border of a control (input, secondary button, checkbox, payment tab): the customer's `borderWidth`, else 1px. Dividers and rings keep `borderWidth`. */
+    controlBorder: string;
+    /** Vertical padding that keeps a 44px control 44px (12px less the border), so the border width never changes the height. */
+    controlPaddingY: string;
+    /** The same for a 32px compact control (6px less the border). */
+    controlPaddingYCompact: string;
+    controlTransition: string;
+    focusOutline: {
+        outline: string;
+        outlineOffset: string;
+    };
+};
+/** The branding the defaults are seeded from (`BrandContext`). */
+export type Brand = {
+    brandColor: string;
+    secondaryColor: string;
+};
+export declare function resolveVariables(brand: Brand, customer?: AppearanceVariables): ResolvedVariables;
+export {};

package/dist/cjs/types/src/ui/components/Button/Button.d.ts

@@ -0,0 +1,33 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+declare const VARIANT_CLASS: {
+    /** The filled main action, styled by the appearance's `.Button` rules. */
+    primary: string;
+    /** A bordered secondary action, styled by the appearance's `.ButtonSecondary` rules. */
+    secondary: string;
+    /** Reads as a link in the text: a `.Link` that is a button, in the primary colour by default. */
+    link: string;
+    /** A small square holding only an icon; give it an `aria-label`. */
+    icon: string;
+};
+/** A native button (or a link, given `href`). Forwards its ref so antd's `Popconfirm`, `Tooltip` and `Dropdown` can attach to it. */
+declare const Button: import("react").ForwardRefExoticComponent<Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "type" | "id" | "aria-current" | "aria-label" | "onClick"> & {
+    variant?: keyof typeof VARIANT_CLASS;
+    /** Shows a spinner in place of the icon and ignores clicks, without looking disabled. */
+    loading?: boolean;
+    icon?: ReactNode;
+    /** Renders a link that looks like the button. */
+    href?: string;
+    /** With `href`: downloads the file under this name. */
+    download?: string;
+    /** A 32px button: the `.Button--compact` (or `.ButtonSecondary--compact`) variant. */
+    compact?: boolean;
+    /**
+     * `span` draws the button as a label inside a control that is itself the button (a clickable `Card`),
+     * which must not hold a second `<button>`. It takes no `onClick`; `disabled` gives it the disabled look
+     * (`aria-disabled`) when that control cannot be chosen.
+     */
+    as?: "span";
+    className?: string;
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export default Button;