@bunnyapp/components 1.8.0-beta.55 → 1.8.0-beta.57

package/dist/esm/types/src/components/tables/Transactions/Transactions.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Transaction } from '@/types/Transaction';
+import { Transaction } from '../../../types/Transaction';
 import { TransactionDateType } from './types';
+import type { Appearance } from '../../../ui/appearance';
 import { TableBehaviorOptions, TableDisplayOptions } from '../InfiniteTable';
 import { TransactionListColumnType } from './transactionsList/getTransactionColumns';
 export type TransactionsDisplayOptions = TableDisplayOptions<TransactionListColumnType>;
@@ -10,7 +11,7 @@ export type TransactionsBehaviorOptions = TableBehaviorOptions & {
     /** Whether to hide the payment form on invoices */
     hidePaymentForm?: boolean;
 };
-export default function Transactions({ transactionComponent, onTransactionClick, filter, sort, displayOptions, behaviorOptions, }: {
+export default function Transactions({ transactionComponent, onTransactionClick, filter, sort, appearance, displayOptions, behaviorOptions, }: {
     /** A custom component to render instead of the default invoice component */
     transactionComponent?: React.ReactNode;
     /** A function to call when a transaction is clicked */
@@ -21,6 +22,8 @@ export default function Transactions({ transactionComponent, onTransactionClick,
     filter?: string;
     /** Sort clause applied server-side, e.g. `"createdAt DESC"` or `"amount ASC"`. */
     sort?: string;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
     displayOptions?: TransactionsDisplayOptions;
     behaviorOptions?: TransactionsBehaviorOptions;
 }): React.JSX.Element;

package/dist/esm/types/src/components/tables/Transactions/Transactions.stories.d.ts

@@ -4,8 +4,6 @@ declare const meta: Meta<typeof Transactions>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Padding0BGRed: Story;
-export declare const NoShadow: Story;
 export declare const WithModal: Story;
 export declare const HideSearchBar: Story;
 export declare const HideTitle: Story;
@@ -18,5 +16,5 @@ export declare const WithCustomColumns2: Story;
 export declare const WithCustomColumns3: Story;
 export declare const WithCustomColumns4: Story;
 export declare const WithCustomColumns5: Story;
-export declare const DarkMode: Story;
-export declare const CustomColors: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/tables/Transactions/transactionsList/getTransactionColumns.d.ts

@@ -1,4 +1,4 @@
-import { Transaction } from '@/types/Transaction';
+import { Transaction } from '../../../../types/Transaction';
 import { TransactionDateType } from '../types';
 import { Column } from '../../InfiniteTable';
 export type TransactionListColumnType = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';

package/dist/esm/types/src/contexts/InvoiceQuoteContext.d.ts

@@ -1,5 +1,4 @@
-import { ShadowType } from '../types/shadowType';
-import FormattedInvoice from '@/types/FormattedInvoice';
+import FormattedInvoice from '../types/FormattedInvoice';
 export type InvoiceQuoteContextProps = {
     id?: string | null | undefined;
     invoiceQuoteViewComponent?: React.ReactNode;
@@ -7,7 +6,6 @@ export type InvoiceQuoteContextProps = {
     onBackButtonClick?: () => void;
     onInvoiceDownloadError?: () => void;
     onPaymentSuccess?: (savePaymentMethod?: boolean) => void;
-    shadow?: ShadowType;
     className?: string;
     hideDownloadButton?: boolean;
     onInvoiceLoaded?: (formattedInvoice: FormattedInvoice) => void;

package/dist/esm/types/src/graphql/mutations/checkout.d.ts

@@ -14,7 +14,7 @@ type CheckoutProps = {
 declare const checkout: ({ quoteId, invoiceId, paymentMethodId, paymentMethodData, token, apiHost, }: CheckoutProps) => Promise<{
     invoice: {
         id: string | null;
-        state: "READY" | "NOT_DUE" | "DUE" | "UNPAID" | "DRAFT" | "PREPARING" | "PAID" | "VOIDED" | "FAILED" | "PROCESSING_PAYMENT" | "MERGED" | "QUEUED" | "CONSOLIDATED";
+        state: "READY" | "NOT_DUE" | "DUE" | "UNPAID" | "DRAFT" | "PREPARING" | "PAID" | "VOIDED" | "FAILED" | "CONSOLIDATED" | "MERGED" | "PROCESSING_PAYMENT" | "QUEUED";
         amount: number;
         amountDue: number | null;
     } | null;

package/dist/esm/types/src/hooks/useFocusFirstInput.d.ts

@@ -1,7 +1,6 @@
-import { InputRef } from "antd";
-import { RefObject } from "react";
+import { RefObject } from 'react';
 declare const useFocusFirstInput: ({ firstInputRef, isVisible, }: {
-    firstInputRef: RefObject<InputRef>;
+    firstInputRef: RefObject<HTMLInputElement>;
     isVisible?: boolean;
 }) => void;
 export default useFocusFirstInput;

package/dist/esm/types/src/hooks/useHasTaxPlugin.d.ts

@@ -1,3 +1,4 @@
+/** Whether the tenant has an enabled, valid taxation plugin — the same condition the API taxes under. */
 declare const useHasTaxPlugin: ({ apiHost, token }: {
     apiHost: string;
     token?: string;

package/dist/esm/types/src/hooks/usePaymentMethod.d.ts

@@ -1,3 +1,34 @@
+export declare const getPaymentMethods: ({ apiHost, token, accountId, }: {
+    apiHost: string;
+    token?: string;
+    accountId?: string;
+}) => Promise<{
+    id: string;
+    pluginId: string | null;
+    accountId: string | null;
+    expirationDate: unknown;
+    plugin: {
+        guid: string;
+        id: string;
+    } | null;
+    state: "FAILED" | "UNKNOWN" | "SUCCESS" | null;
+    metadata: {
+        issuer: string | null;
+        identifier: string | null;
+        kind: string | null;
+        description: string | null;
+        icon: string | null;
+        type: string | null;
+    } | null;
+    isDefault: boolean | null;
+    [$tada.fragmentRefs]: {
+        PaymentForm_PaymentMethodsFragment: "PaymentMethod";
+    } & {
+        SavedPaymentMethodTiles_PaymentMethodFragment: "PaymentMethod";
+    } & {
+        SuccessDisplay_PaymentMethodFragment: "PaymentMethod";
+    };
+}[]>;
 export declare const usePaymentMethod: ({ accountId, enabled, }: {
     accountId?: string;
     enabled?: boolean;
@@ -24,7 +55,9 @@ export declare const usePaymentMethod: ({ accountId, enabled, }: {
         [$tada.fragmentRefs]: {
             PaymentForm_PaymentMethodsFragment: "PaymentMethod";
         } & {
-            StoredPaymentMethods_PaymentMethodsFragment: "PaymentMethod";
+            SavedPaymentMethodTiles_PaymentMethodFragment: "PaymentMethod";
+        } & {
+            SuccessDisplay_PaymentMethodFragment: "PaymentMethod";
         };
     }[]> | undefined;
     defaultPaymentMethod: {
@@ -49,7 +82,9 @@ export declare const usePaymentMethod: ({ accountId, enabled, }: {
         [$tada.fragmentRefs]: {
             PaymentForm_PaymentMethodsFragment: "PaymentMethod";
         } & {
-            StoredPaymentMethods_PaymentMethodsFragment: "PaymentMethod";
+            SavedPaymentMethodTiles_PaymentMethodFragment: "PaymentMethod";
+        } & {
+            SuccessDisplay_PaymentMethodFragment: "PaymentMethod";
         };
     } | undefined;
     isLoading: boolean;

package/dist/esm/types/src/mocks/checkoutHandlers.d.ts

@@ -0,0 +1,3 @@
+export declare const noSavedPaymentMethodsHandler: import("msw").GraphQLHandler;
+export declare const savedPaymentMethodHandler: import("msw").GraphQLHandler;
+export declare const checkoutHandlers: (import("msw").GraphQLHandler | import("msw").HttpHandler)[];

package/dist/esm/types/src/mocks/handlers.d.ts

@@ -1 +1 @@
-export declare const handlers: import("msw").GraphQLHandler[];
+export declare const handlers: (import("msw").GraphQLHandler | import("msw").HttpHandler)[];

package/dist/esm/types/src/mocks/paymentFormHandlers.d.ts

@@ -0,0 +1,6 @@
+export declare function paymentFormHandlers({ savedCards, plugins, failedCard, }?: {
+    savedCards?: number;
+    plugins?: number;
+    /** The second saved card's last payment failed. */
+    failedCard?: boolean;
+}): (import("msw").GraphQLHandler | import("msw").HttpHandler)[];

package/dist/esm/types/src/storybook-utils.d.ts

@@ -1,10 +1,21 @@
-export declare const DarkModeParams: {
-    darkMode: boolean;
-    backgrounds: {
-        default: string;
-        values: {
-            name: string;
+/**
+ * A dark story canvas, for themes (like Midnight) whose own variables are dark. Storybook 10's
+ * backgrounds API: the option is declared in `parameters`, the choice in `globals`.
+ */
+export declare const darkCanvas: {
+    parameters: {
+        backgrounds: {
+            options: {
+                dark: {
+                    name: string;
+                    value: string;
+                };
+            };
+        };
+    };
+    globals: {
+        backgrounds: {
             value: string;
-        }[];
+        };
     };
 };

package/dist/esm/types/src/types/CreditNote.d.ts

@@ -4,7 +4,7 @@ import DisputeReason from './DisputeReason';
 import Entity from './Entity';
 import CreditNoteItem from './CreditNoteItem';
 import InvoiceConnection from './InvoiceConnection';
-import CreditNoteState from '@/enums/CreditNoteState';
+import CreditNoteState from '../enums/CreditNoteState';
 export type CreditNoteKind = 'REFUND' | 'WRITE_OFF';
 type CreditNote = {
     account: Account;

package/dist/esm/types/src/types/Feature.d.ts

@@ -1,4 +1,4 @@
-import { ChargeType } from '@/graphql-codegen/exportedScalarTypes';
+import { ChargeType } from './scalarTypes';
 import { Plan } from './Plan';
 export type FeatureKind = 'BOOLEAN' | 'VALUE' | 'MARKETING' | 'GROUP' | 'QUANTITY';
 type Feature = {

package/dist/esm/types/src/types/FormattedInvoice.d.ts

@@ -35,7 +35,7 @@ type FormattedInvoice = {
     poNumber?: string;
     printedState?: string;
     salesContactEmail?: string;
-    smallUnitAmountDUe?: number;
+    smallUnitAmountDue?: number;
     state: State;
     subscriptionEndDate?: string;
     subscriptionStartDate?: string;

package/dist/esm/types/src/types/InvoiceItem.d.ts

@@ -1,7 +1,7 @@
 import PriceTier from './PriceTier';
 import QuoteCharge from './QuoteCharge';
 import { SubscriptionCharge } from './SubscriptionCharge';
-import QuoteChangeKind from '@/enums/QuoteChangeKind';
+import QuoteChangeKind from '../enums/QuoteChangeKind';
 import Invoice from './Invoice';
 import CreditNoteItem from './CreditNoteItem';
 type InvoiceItem = {

package/dist/esm/types/src/types/PriceList.d.ts

@@ -1,5 +1,5 @@
-import PriceAdjustmentAction from '@/enums/PriceAdjustmentAction';
-import PriceAdjustmentTiming from '@/enums/PriceAdjustmentTiming';
+import PriceAdjustmentAction from '../enums/PriceAdjustmentAction';
+import PriceAdjustmentTiming from '../enums/PriceAdjustmentTiming';
 import Currency from './Currency';
 import { Plan } from './Plan';
 import { PriceListCharge } from './PriceListCharge';

package/dist/esm/types/src/types/PriceListCharge.d.ts

@@ -2,7 +2,7 @@ import PriceList from './PriceList';
 import PriceListChargeTier from './PriceListChargeTier';
 import { Plan } from './Plan';
 import Feature from './Feature';
-import { BillingPeriod, ChargeType } from '@/graphql-codegen/exportedScalarTypes';
+import { BillingPeriod, ChargeType } from './scalarTypes';
 export declare enum UsageCalculationType {
     SUM = "SUM",
     MAX = "MAX",

package/dist/esm/types/src/types/Quote.d.ts

@@ -1,4 +1,4 @@
-import { QuoteChangeKind } from '@/graphql-codegen/exportedScalarTypes';
+import { QuoteChangeKind } from './scalarTypes';
 import Account from './Account';
 import ApprovalRequest from './ApprovalRequest';
 import ApprovalRule from './ApprovalRule';

package/dist/esm/types/src/types/QuoteChange.d.ts

@@ -1,4 +1,4 @@
-import { QuoteChangeKind } from '@/graphql-codegen/exportedScalarTypes';
+import { QuoteChangeKind } from './scalarTypes';
 import PriceList from './PriceList';
 import { Quote } from './Quote';
 import QuoteCharge from './QuoteCharge';

package/dist/esm/types/src/types/QuoteCharge.d.ts

@@ -4,9 +4,9 @@ import PriceTier from './PriceTier';
 import PriceList from './PriceList';
 import { PriceListCharge } from './PriceListCharge';
 import { SubscriptionCharge } from './SubscriptionCharge';
-import { ChargeType } from '@/graphql-codegen/exportedScalarTypes';
+import { ChargeType } from './scalarTypes';
 import { AmountByPeriod } from './Quote';
-import { BillingPeriod } from '@/graphql-codegen/exportedScalarTypes';
+import { BillingPeriod } from './scalarTypes';
 import Coupon from './Coupon';
 import QuoteChange from './QuoteChange';
 export type QuoteCharge = {

package/dist/esm/types/src/types/SubscriptionCharge.d.ts

@@ -1,4 +1,4 @@
-import { BillingPeriod, ChargeType, QuoteChangeKind } from '@/graphql-codegen/exportedScalarTypes';
+import { BillingPeriod, ChargeType, QuoteChangeKind } from './scalarTypes';
 import Account from './Account';
 import Currency from './Currency';
 import Feature from './Feature';

package/dist/esm/types/src/types/frontendTypes/TableColumn.d.ts

@@ -1,4 +1,4 @@
-import ColumnFormat from '@/enums/ColumnFormat';
+import ColumnFormat from '../../enums/ColumnFormat';
 type TableColumn = {
     droppable?: boolean;
     format?: ColumnFormat;

package/dist/esm/types/src/types/scalarTypes.d.ts

@@ -0,0 +1,3 @@
+export type QuoteChangeKind = 'ACTIVATE' | 'ADJUSTMENT' | 'COUPON' | 'CREDIT' | 'DISCOUNT' | 'FREE_PERIOD_DISCOUNT' | 'PERCENTAGE_DISCOUNT' | 'PRICE_UPDATE' | 'QUANTITY_UPDATE' | 'REINSTATE' | 'RENEW' | 'SUBSCRIBE' | 'UNSUBSCRIBE' | 'UPDATE';
+export type ChargeType = 'ONE_TIME' | 'RECURRING' | 'USAGE';
+export type BillingPeriod = 'ANNUAL' | 'MONTHLY' | 'ONCE' | 'QUARTERLY' | 'SEMI_ANNUAL';

package/dist/esm/types/src/types/scalarTypes.types.test.d.ts

@@ -0,0 +1,5 @@
+import type * as Schema from '../graphql-codegen/exportedScalarTypes';
+import type * as Written from './scalarTypes';
+export declare const _quoteChangeKind: [Schema.QuoteChangeKind, Written.QuoteChangeKind];
+export declare const _chargeType: [Schema.ChargeType, Written.ChargeType];
+export declare const _billingPeriod: [Schema.BillingPeriod, Written.BillingPeriod];

package/dist/esm/types/src/ui/appearance/AppearanceProvider.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, type CSSProperties } from 'react';
+import { type ResolvedAppearance } from './resolveAppearance';
+import type { Appearance } from './types';
+export declare function useResolvedAppearance(): ResolvedAppearance;
+/** The class of the nearest root, for overlays that render outside it. Empty outside a root. */
+export declare function useAppearanceScope(): string;
+/**
+ * Resolves the appearance once and renders the root every rule is scoped to, with the rules as one
+ * `<style>`. A root inside another one with no `appearance` of its own is a `<div>` carrying its parent's scope class (so it is still styled when portalled out of the parent's DOM); with one, it
+ * merges it over its parent's and emits its own scoped rules.
+ */
+export declare function AppearanceRoot({ appearance, className, style, children, }: {
+    appearance?: Appearance;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/esm/types/src/ui/appearance/antdTheme.d.ts

@@ -0,0 +1,9 @@
+import { type ThemeConfig } from 'antd';
+import { type ReactNode } from 'react';
+import type { ResolvedVariables } from './variables';
+/** The theme for the antd components we keep (overlays, Form wiring), derived from the resolved variables. */
+export declare function antdThemeFrom(v: ResolvedVariables): ThemeConfig;
+/** antd's `ConfigProvider`, themed from the nearest appearance root. */
+export declare function AntdTheme({ children }: {
+    children?: ReactNode;
+}): import("react").FunctionComponentElement<import("antd").ConfigProviderProps>;

package/dist/esm/types/src/ui/appearance/appearance.types.test.d.ts

@@ -0,0 +1,19 @@
+import { RULE_SOURCES } from './rules';
+import type { Appearance, AppearanceStyle, AppearanceSharedStyle, AppearanceSelectorRules, SharedRoot, StateSuffix } from './types';
+export declare const rejected: Appearance[];
+export declare const accepted: Appearance[];
+type Source = ReturnType<(typeof RULE_SOURCES)[number]>;
+type UnionToIntersection<U> = (U extends unknown ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
+/** The sources' public keys without their compound keys (`'.Summary .Divider'`). */
+type Public = Exclude<keyof UnionToIntersection<Source['public']>, `${string} ${string}`>;
+export declare const _sourcesInRules: Public;
+export declare const _rulesInSources: keyof AppearanceSelectorRules;
+export declare const _regionsInSources: Public;
+export declare const _sharedRootsInSources: Public;
+type Equals<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2 ? true : false;
+type StyleOfKind<K> = K extends SharedRoot | `${SharedRoot}${StateSuffix}` ? AppearanceSharedStyle : AppearanceStyle;
+type WrongStyle = {
+    [K in keyof AppearanceSelectorRules]-?: Equals<Exclude<AppearanceSelectorRules[K], undefined>, StyleOfKind<K>> extends true ? never : K;
+}[keyof AppearanceSelectorRules];
+export declare const _styleMatchesKind: Record<WrongStyle, never>;
+export {};

package/dist/esm/types/src/ui/appearance/color.d.ts

@@ -0,0 +1,28 @@
+type Rgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+/**
+ * A hex (`#rgb`, `#rrggbb`, with or without alpha), `rgb()`/`rgba()` or `hsl()`/`hsla()` colour, or
+ * `undefined` for anything else (a colour name, `var()`).
+ */
+export declare function parseColor(color: string): Rgba | undefined;
+/** `color` as `#rrggbb` (`#rrggbbaa` when it is translucent). */
+export declare const hex: (color: string) => string;
+/** `color` at `alpha` opacity, as `rgba()`. */
+export declare const withAlpha: (color: string, alpha: number) => string;
+/**
+ * Ten steps of `color`, lightest first, `color` itself sixth: `[0]` a light tint, `[4]` the hover
+ * shade, `[6]` the pressed shade. Hue turns and saturation and value step as in antd's palettes.
+ */
+export declare function shades(color: string): string[];
+/**
+ * The most transparent colour that looks like `color` over `background`: how antd turned the primary's
+ * light tint into the focus ring's colour.
+ */
+export declare function overlayOf(color: string, background: string): string;
+/** Relative luminance below one half of a hex, `rgb()` or `hsl()` color; any other format is not dark. */
+export declare const isDarkColor: (color: string) => boolean;
+export {};

package/dist/esm/types/src/ui/appearance/deprecatedTypes.d.ts

@@ -0,0 +1,7 @@
+import type { AppearanceSharedStyle, AppearanceStyle, RuleProperty as Property } from './types';
+/** @deprecated Use `AppearanceStyle`. */
+export type AppearanceBlockStyle = AppearanceStyle;
+/** @deprecated Use AppearanceSharedStyle. */
+export type AppearanceRuleStyle = AppearanceSharedStyle;
+/** @deprecated Use `keyof AppearanceSharedStyle`. */
+export type RuleProperty = Property;

package/dist/esm/types/src/ui/appearance/index.d.ts

@@ -0,0 +1,2 @@
+export { AppearanceRoot, useAppearanceScope, useResolvedAppearance } from './AppearanceProvider';
+export type { Appearance, AppearanceFont, AppearanceStyle, AppearanceRegion, AppearanceRules, AppearanceSharedStyle, AppearanceScopedRules, AppearanceSelectorRules, AppearanceVariables, } from './types';

package/dist/esm/types/src/ui/appearance/pageFonts.d.ts

@@ -0,0 +1,3 @@
+import type { AppearanceFont } from './types';
+/** Loads the fonts onto the page while the calling root is mounted. Effects only, so it is safe to render on a server. */
+export declare function usePageFonts(fonts: AppearanceFont[] | undefined): void;

package/dist/esm/types/src/ui/appearance/resolveAppearance.d.ts

@@ -0,0 +1,34 @@
+import { type Appearance, type AppearanceFont, type AppearanceVariables } from './types';
+import { type Brand, type ResolvedVariables } from './variables';
+/** Selector → style. Holds the public selectors and the internal ones the screen's other elements use. */
+export type RulesMap = Record<string, Record<string, string>>;
+export type ResolvedAppearance = {
+    variables: ResolvedVariables;
+    /** The variables the customer set themselves, for the ones the payment provider gets only when set. */
+    customerVariables: AppearanceVariables;
+    /** Our default rules, per source in `internal` → `public` order: the CSS's first block. */
+    defaults: RulesMap;
+    /** The customer's rules, without unknown keys and unsafe values: the CSS's second block, after every default. */
+    customer: RulesMap;
+    /** `defaults` with `customer` merged in per selector and per property, for the payment provider and the dump. */
+    rules: RulesMap;
+    /** Every public selector of the sources (their `public` keys). */
+    publicSelectors: string[];
+    /** The selectors the payment provider's fields have too (on a `SHARED_ROOTS` root); their rules are handed over as they are. */
+    sharedSelectors: string[];
+    fonts: AppearanceFont[] | undefined;
+    /** The font our text inherits from the page, once measured. */
+    pageFontFamily: string | undefined;
+};
+/**
+ * `over` merged onto `base`: variables spread, rules per selector then per property, fonts
+ * concatenated without repeats. Unset values (`undefined`, `null`, `''`) are dropped, so they never
+ * replace a set one.
+ */
+export declare function mergeAppearances(base?: Appearance, over?: Appearance): Appearance;
+/**
+ * Variables (our defaults, then the customer's) → the default rules built from them, and the
+ * customer's rules as given. Our CSS emits the two as separate blocks, defaults first; the payment
+ * provider's appearance is made from the two merged.
+ */
+export declare function resolveAppearance(brand: Brand, isMobile: boolean, appearance?: Appearance, pageFontFamily?: string): ResolvedAppearance;

package/dist/esm/types/src/ui/appearance/ruleGroups.d.ts

@@ -0,0 +1,17 @@
+import type { AppearanceRules } from './types';
+/** What one rule source returns. Both groups are required (write `{}` when one is empty). */
+export type RuleGroups = {
+    /** Not in the API: base classes, modifiers and elements customers reach only through variables. Any CSS. */
+    internal: Record<string, Record<string, string>>;
+    /**
+     * Public: roles with their states, regions, and a role's look inside a region (`'.Summary .Divider'`).
+     * Typed by the customer contract, so a key or a property customers couldn't write fails to compile.
+     * Whether a key is shared with the payment provider or a region is decided by `SHARED_ROOTS` and
+     * `REGIONS` in `types.ts`, not by the group.
+     */
+    public: AppearanceRules;
+};
+/** What a rule source can read besides the variables. */
+export type RuleContext = {
+    isMobile: boolean;
+};

package/dist/esm/types/src/ui/appearance/rules.d.ts

@@ -0,0 +1,42 @@
+import { screenRules } from '../../components/CheckoutShared/components/CheckoutScreen.rules';
+import { demoPayCardBoxRules } from '../../components/PaymentMethods/components/DemoPayCardBox.rules';
+import { fieldRules } from '../components/Field/Field.rules';
+import { paymentTileRules } from '../../components/PaymentMethods/components/PaymentTile.rules';
+import { cardRules } from '../components/Card/Card.rules';
+import { checkboxRules } from '../components/Checkbox/Checkbox.rules';
+import { dividerRules } from '../components/Divider/Divider.rules';
+import { documentRules } from '../components/Document/Document.rules';
+import { drawerRules } from '../components/Drawer/Drawer.rules';
+import { linkRules } from '../components/Link/Link.rules';
+import { modalRules } from '../components/Modal/Modal.rules';
+import { popconfirmRules } from '../components/Popconfirm/Popconfirm.rules';
+import { tooltipRules } from '../components/Tooltip/Tooltip.rules';
+import { segmentedRules } from '../components/Segmented/Segmented.rules';
+import { skeletonRules } from '../components/Skeleton/Skeleton.rules';
+import { switchRules } from '../components/Switch/Switch.rules';
+import { tagRules } from '../components/Tag/Tag.rules';
+import { textRules } from '../components/Text/Text.rules';
+import { footerRules } from '../../components/Footer/Footer.rules';
+import { quoteRules } from '../../components/Quote/Quote.rules';
+import { billingDetailsRules } from '../../components/BillingDetails/BillingDetails.rules';
+import { invoiceRules } from '../../components/Invoice/Invoice.rules';
+import { subscriptionsRules } from '../../components/Subscriptions/Subscriptions.rules';
+import { upgradeRules } from '../../components/Subscriptions/Upgrade/Upgrade.rules';
+import { upgradeCheckoutRules } from '../../components/UpgradeCheckout/UpgradeCheckout.rules';
+import { infiniteTableRules } from '../../components/tables/InfiniteTable/InfiniteTable.rules';
+import { buttonRules } from '../components/Button/Button.rules';
+import { selectRules } from '../components/Select/Select.rules';
+import { textInputRules } from '../components/TextInput/TextInput.rules';
+import type { LocalVariant, SharedRoot, StateSuffix } from './types';
+/**
+ * Every rule source. A selector belongs to one source (resolving throws in development otherwise), and
+ * a rule that overrides another uses a compound selector (`.Input.Select`), so the order here doesn't
+ * matter. Within a source, `internal` comes first, then `public`. The public `AppearanceSelectorRules`
+ * type in `types.ts` is written by hand; the type test checks its keys against this list.
+ */
+export declare const RULE_SOURCES: readonly [typeof screenRules, typeof fieldRules, typeof textInputRules, typeof selectRules, typeof demoPayCardBoxRules, typeof paymentTileRules, typeof buttonRules, typeof textRules, typeof dividerRules, typeof linkRules, typeof tagRules, typeof switchRules, typeof checkboxRules, typeof segmentedRules, typeof skeletonRules, typeof cardRules, typeof documentRules, typeof drawerRules, typeof modalRules, typeof popconfirmRules, typeof tooltipRules, typeof footerRules, typeof invoiceRules, typeof quoteRules, typeof billingDetailsRules, typeof infiniteTableRules, typeof subscriptionsRules, typeof upgradeRules, typeof upgradeCheckoutRules];
+type Source = ReturnType<(typeof RULE_SOURCES)[number]>;
+type UnionToIntersection<U> = (U extends unknown ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
+/** The selectors the payment provider's fields have too: the sources' public keys on a shared root, but its Bunny-only variants. */
+export type SharedSelector = Exclude<Extract<keyof UnionToIntersection<Source['public']>, SharedRoot | `${SharedRoot}${StateSuffix}`>, `${string}${LocalVariant}`>;
+export {};

package/dist/esm/types/src/ui/appearance/rulesToCss.d.ts

@@ -0,0 +1,27 @@
+import type { ResolvedAppearance } from './resolveAppearance';
+/** The class every appearance root carries, next to its own scope class. */
+export declare const ROOT_CLASS = "bunny-appearance";
+/**
+ * `.Input--invalid` → `.bunny-Input[aria-invalid="true"]`. Rule classes get the `bunny-` prefix so a
+ * host page's own `.Input` or `.Button` CSS can't leak in, and the states a native element can't
+ * express as a pseudo-class are read from its ARIA attributes (`--current`, internal, is the pager's
+ * current page) or, for `--alternate`, `--display` and `--compact`, from a `data-` attribute.
+ */
+export declare const toCss: (selector: string) => string;
+/**
+ * One root's CSS for our own DOM, scoped to its `scopeClass`, in two blocks: our defaults, then the
+ * customer's rules. Every selector is weakened by the one rule (`weaken`), and each block is ordered
+ * by the selectors' specificity as written (`block`), so a rule with a context or a modifier still
+ * beats its plain role by order. Selectors with no style (`.Summary` by default) are left out.
+ *
+ * Specificity, counting the root's scope class, is (0,2,0) for every role and (0,3,0) for every role
+ * state (one more for a role drawn on top of another, such as `.Heading` on `.Text`), whoever wrote it
+ * and whatever its context. So order decides, and a customer's rule wins over
+ * every default at the same or lower specificity: their `.Button` over our `.Button` and our
+ * `'.Summary .Button'`; their `'.Summary .Button'` over their `.Button`. A state is a separate key: our
+ * `.Button:hover` beats their `.Button`, so a customer sets `.Button:hover` too.
+ *
+ * Every root's scope has the same specificity, so a nested root's `<style>` (later in the DOM than its
+ * parent's) wins over the parent's for the same selector.
+ */
+export declare function rulesToCss(resolved: Pick<ResolvedAppearance, 'defaults' | 'customer' | 'publicSelectors'>, scopeClass: string): string;

package/dist/esm/types/src/ui/appearance/scripts/dumpAppearance.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/src/ui/appearance/stories/TwoRoots.stories.d.ts

@@ -0,0 +1,4 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;

package/dist/esm/types/src/ui/appearance/stories/themes.d.ts

@@ -0,0 +1,49 @@
+import type { Decorator } from '@storybook/react-vite';
+import type { Appearance } from '@/ui/appearance';
+/**
+ * For stories without a theme. The story page's font is Inter, which our text inherits; the payment
+ * iframe can't see the page's fonts, so Inter is declared for it here, as a customer would.
+ */
+export declare const pageFontAppearance: Appearance;
+/** Editorial, print-like: warm paper, ink hairlines, square corners, a serif face (the story page's font). */
+export declare const ledger: Appearance;
+/** Dark fintech: navy columns, filled inputs, a lime accent, a pill button, a monospace face (the story page's font). */
+export declare const midnight: Appearance;
+/** Spread into a story: the theme's `appearance` arg, its page font and, for Midnight, a dark canvas. */
+export declare const ledgerStory: {
+    args: {
+        appearance: Appearance;
+    };
+    decorators: Decorator[];
+};
+export declare const midnightStory: {
+    args: {
+        appearance: Appearance;
+    };
+    decorators: Decorator[];
+    parameters: {
+        backgrounds: {
+            options: {
+                dark: {
+                    name: string;
+                    value: string;
+                };
+            };
+        };
+    };
+    globals: {
+        backgrounds: {
+            value: string;
+        };
+    };
+};
+/**
+ * Story-level `globals` that render the story in a phone-sized iframe (320px, below the screen's
+ * 768px breakpoint). Storybook 10 ignores the older `parameters.viewport.defaultViewport`.
+ */
+export declare const mobileGlobals: {
+    viewport: {
+        value: string;
+        isRotated: boolean;
+    };
+};