@bunnyapp/components 1.8.6 → 2.0.0-beta.1

package/dist/esm/types/src/components/UpgradeCheckout/QuoteCheckoutPaymentForm.d.ts

@@ -0,0 +1,42 @@
+import { PaymentForm } from '@/components/PaymentForm';
+import { FragmentOf } from 'gql.tada';
+import { ComponentProps } from 'react';
+export declare const QuoteCheckoutPaymentForm_QuoteFragment: import("gql.tada").TadaDocumentNode<{
+    id: string | null;
+    quoteChanges: {
+        id: string | null;
+        charges: {
+            coupon: {
+                couponCode: string;
+            } | null;
+        }[];
+    }[] | null;
+    [$tada.fragmentRefs]: {
+        canApplyCoupons_QuoteFragment: "Quote";
+    } & {
+        PaymentForm_QuoteFragment: "Quote";
+    };
+}, {}, {
+    fragment: "QuoteCheckoutPaymentForm_QuoteFragment";
+    on: "Quote";
+    masked: true;
+}>;
+export declare const QuoteCheckoutPaymentForm_SubscriptionFragment: import("gql.tada").TadaDocumentNode<{
+    id: string;
+    [$tada.fragmentRefs]: {
+        canApplyCoupons_SubscriptionFragment: "Subscription";
+    };
+}, {}, {
+    fragment: "QuoteCheckoutPaymentForm_SubscriptionFragment";
+    on: "Subscription";
+    masked: true;
+}>;
+type PaymentFormProps = ComponentProps<typeof PaymentForm>;
+type QuoteCheckoutPaymentFormProps = Omit<PaymentFormProps, 'children' | 'quote'> & {
+    quote: FragmentOf<typeof QuoteCheckoutPaymentForm_QuoteFragment>;
+    upgradingSubscription?: FragmentOf<typeof QuoteCheckoutPaymentForm_SubscriptionFragment> | null;
+    onRecalculateTaxes: () => void;
+    isFinalizingQuote: boolean;
+};
+export default function QuoteCheckoutPaymentForm({ quote: maskedQuote, upgradingSubscription: maskedUpgradingSubscription, onRecalculateTaxes, isFinalizingQuote, ...paymentFormProps }: QuoteCheckoutPaymentFormProps): import("react").JSX.Element;
+export {};

package/dist/esm/types/src/components/UpgradeCheckout/QuoteIsLoadingIndicator.d.ts

@@ -0,0 +1 @@
+export declare function QuoteLoadingIndicator(): import("react").JSX.Element;

package/dist/esm/types/src/components/UpgradeCheckout/UpgradeCheckout.d.ts

@@ -0,0 +1,41 @@
+import FormattedInvoice from '@/types/FormattedInvoice';
+import { FragmentOf } from 'gql.tada';
+export declare const UpgradeCheckout_QuoteFragment: import("gql.tada").TadaDocumentNode<{
+    id: string | null;
+    accountId: string;
+    formattedQuote: {
+        html: string | null;
+    } | null;
+    [$tada.fragmentRefs]: {
+        QuoteCheckout_QuoteFragment: "Quote";
+    };
+}, {}, {
+    fragment: "UpgradeCheckout_QuoteFragment";
+    on: "Quote";
+    masked: true;
+}>;
+export declare const UpgradeCheckout_SubscriptionFragment: import("gql.tada").TadaDocumentNode<{
+    id: string;
+    [$tada.fragmentRefs]: {
+        QuoteCheckout_SubscriptionFragment: "Subscription";
+    };
+}, {}, {
+    fragment: "UpgradeCheckout_SubscriptionFragment";
+    on: "Subscription";
+    masked: true;
+}>;
+type UpgradeCheckoutProps = {
+    invoice?: FormattedInvoice;
+    onCancel: () => void;
+    onFail: (error: any) => void;
+    onSuccess: () => void;
+    onRecalculateTaxes: (quoteId: string) => void;
+    open: boolean;
+    quote?: FragmentOf<typeof UpgradeCheckout_QuoteFragment> | null;
+    upgradingSubscription?: FragmentOf<typeof UpgradeCheckout_SubscriptionFragment> | null;
+    token?: string;
+    isUpdatingQuote: boolean;
+    isRecalculatingTaxes: boolean;
+};
+declare const UpgradeCheckout: ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, open, quote: maskedQuote, upgradingSubscription: maskedUpgradingSubscription, isUpdatingQuote, isRecalculatingTaxes, }: UpgradeCheckoutProps) => import("react").JSX.Element | null;
+export default UpgradeCheckout;

package/dist/esm/types/src/components/UpgradeCheckout/UpgradeCheckout.rules.d.ts

@@ -0,0 +1,17 @@
+import type { RuleContext } from '../../ui/appearance/ruleGroups';
+import type { ResolvedVariables } from '../../ui/appearance/variables';
+export declare function upgradeCheckoutRules(v: ResolvedVariables, { isMobile }: RuleContext): {
+    internal: {
+        '.UpgradeCheckout': {
+            backgroundColor: string;
+        };
+        '.UpgradeCheckoutContent': {
+            boxSizing: string;
+            width: string;
+            maxWidth: string;
+            margin: string;
+            padding: string;
+        };
+    };
+    public: {};
+};

package/dist/esm/types/src/components/icons/Amex.d.ts

@@ -1,4 +1,4 @@
 declare const Amex: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Amex;

package/dist/esm/types/src/components/icons/ArrowDownToLine.d.ts

@@ -1,5 +1,5 @@
 declare const ArrowDownToLine: ({ className, color, }: {
     className?: string;
     color?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ArrowDownToLine;

package/dist/esm/types/src/components/icons/Bancontact.d.ts

@@ -1,4 +1,4 @@
 declare const Bancontact: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Bancontact;

package/dist/esm/types/src/components/icons/CardIcon.d.ts

@@ -1,4 +1,4 @@
 declare const CardIcon: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default CardIcon;

package/dist/esm/types/src/components/icons/Cashapp.d.ts

@@ -1,4 +1,4 @@
 declare const Cashapp: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Cashapp;

package/dist/esm/types/src/components/icons/ChinaUnionPay.d.ts

@@ -1,4 +1,4 @@
 declare const ChinaUnionPay: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ChinaUnionPay;

package/dist/esm/types/src/components/icons/CreditCard.d.ts

@@ -1,4 +1,4 @@
 declare const CreditCard: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default CreditCard;

package/dist/esm/types/src/components/icons/DinersClub.d.ts

@@ -1,4 +1,4 @@
 declare const DinersClub: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DinersClub;

package/dist/esm/types/src/components/icons/Discover.d.ts

@@ -1,4 +1,4 @@
 declare const Discover: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Discover;

package/dist/esm/types/src/components/icons/IDeal.d.ts

@@ -1,4 +1,4 @@
 declare const IDeal: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default IDeal;

package/dist/esm/types/src/components/icons/JSB.d.ts

@@ -1,4 +1,4 @@
 declare const JCB: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default JCB;

package/dist/esm/types/src/components/icons/Link.d.ts

@@ -1,4 +1,4 @@
 declare const Cashapp: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Cashapp;

package/dist/esm/types/src/components/icons/Mastercard.d.ts

@@ -1,4 +1,4 @@
 declare const Mastercard: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Mastercard;

package/dist/esm/types/src/components/icons/Sepa.d.ts

@@ -1,4 +1,4 @@
 declare const Sepa: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Sepa;

package/dist/esm/types/src/components/icons/Visa.d.ts

@@ -1,4 +1,4 @@
 declare const Visa: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Visa;

package/dist/esm/types/src/components/index.d.ts

@@ -1,12 +1,19 @@
 export { Invoice } from './Invoice';
+export { Invoices } from './tables/Invoices';
 export { Quote } from './Quote';
-export { Quotes } from './Quotes';
+export { Quotes } from './tables/Quotes';
 export { PaymentForm } from './PaymentForm';
 export { Signup } from './Signup';
+export { Checkout } from './Checkout';
+export type { Appearance, AppearanceRules, AppearanceVariables, AppearanceStyle, AppearanceSharedStyle, AppearanceFont, } from '../ui/appearance/types';
+export type { AppearanceBlockStyle, AppearanceRuleStyle, RuleProperty, } from '../ui/appearance/deprecatedTypes';
+export type { CheckoutCallbacks, CheckoutDefaultValues, CheckoutDisabledFields, CheckoutFormOptions, CheckoutProps, RequiredBillingDetailsFlags, } from './Checkout';
+export type { SignupProps } from './Signup';
+export type { default as FormattedInvoice } from '../types/FormattedInvoice';
 export { default as BunnyProvider } from './BunnyProvider/BunnyProvider';
-export { default as Transactions } from './Transactions';
+export { default as Transactions } from './tables/Transactions';
 export { Subscriptions } from './Subscriptions';
 export { BillingDetails } from './BillingDetails';
 export { Footer } from './Footer';
-export { MiniCreditCard } from './PaymentForm/DemoPay/CreditCard';
+export { MiniCreditCard } from './PaymentForm/components/MiniCreditCard';
 export { Upgrade } from './Subscriptions';

package/dist/esm/types/src/components/priceListPricing/PricingTooltip.d.ts

@@ -1,4 +1,5 @@
 import { FragmentOf } from 'gql.tada';
+import { ReactNode } from 'react';
 export declare const PricingTooltip_PriceListChargeFragment: import("gql.tada").TadaDocumentNode<{
     priceListChargeTiers: {
         starts: number | null;
@@ -10,6 +11,8 @@ export declare const PricingTooltip_PriceListChargeFragment: import("gql.tada").
     } | null;
     priceDecimals: number | null;
     basePrice: number;
+    price: unknown;
+    chargeType: "ONE_TIME" | "RECURRING" | "USAGE" | null;
     name: string;
     [$tada.fragmentRefs]: {
         priceListChargePriceDescription_PriceListChargeFragment: "PriceListCharge";
@@ -35,8 +38,10 @@ export declare const PricingTooltip_PriceListFragment: import("gql.tada").TadaDo
     on: "PriceList";
     masked: true;
 }>;
-export declare const PricingTooltip: ({ className, priceListCharges: maskedPriceListCharges, currencyId, }: {
+export declare const PricingTooltip: ({ className, priceListCharges: maskedPriceListCharges, currencyId, children, }: {
     className?: string;
     priceListCharges: FragmentOf<typeof PricingTooltip_PriceListChargeFragment>[];
     currencyId: string;
-}) => import("react/jsx-runtime").JSX.Element;
+    /** The hover trigger; defaults to an info icon. */
+    children?: ReactNode;
+}) => import("react").JSX.Element;

package/dist/esm/types/src/components/priceListPricing/components/ChargePriceTiers.d.ts

@@ -20,5 +20,5 @@ export declare const ChargePriceTiers_PriceListChargeFragment: import("gql.tada"
 declare const ChargePriceTiers: ({ charge: maskedCharge, currencyId, }: {
     charge: FragmentOf<typeof ChargePriceTiers_PriceListChargeFragment>;
     currencyId: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ChargePriceTiers;

package/dist/esm/types/src/components/priceListPricing/components/PriceTierPrice.d.ts

@@ -10,5 +10,5 @@ declare const PriceTierPrice: ({ currencyId, priceDecimals, tier: maskedTier, }:
     currencyId: string;
     priceDecimals: number;
     tier: FragmentOf<typeof PriceTierPrice_PriceTierFragment>;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default PriceTierPrice;

package/dist/esm/types/src/components/priceListPricing/components/PriceTierRow.d.ts

@@ -9,5 +9,5 @@ export declare const PriceTierRow_PriceTierFragment: import("gql.tada").TadaDocu
 declare const PriceTierRow: ({ tier: maskedTier, nextTier: maskedNextTier, }: {
     tier: FragmentOf<typeof PriceTierRow_PriceTierFragment> | null;
     nextTier: FragmentOf<typeof PriceTierRow_PriceTierFragment> | null;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default PriceTierRow;

package/dist/esm/types/src/components/tables/InfiniteTable/InfiniteResourceTable.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { type Appearance } from '../../../ui/appearance';
+import { Column, CursorPage, InfiniteTableQueryArgs } from './types';
+export type InfiniteResourceTableDisplayOptions = {
+    className?: string;
+    style?: React.CSSProperties;
+    showTitle?: boolean;
+    title?: string;
+    showSearchBar?: boolean;
+    searchBarClassName?: string;
+    searchPlaceholder?: string;
+    useModal?: boolean;
+    detailWidth?: number;
+};
+export type InfiniteResourceTableBehaviorOptions = {
+    rowsPerPage?: number;
+    suppressDetail?: boolean;
+};
+type Props<T> = {
+    queryKey: readonly unknown[];
+    queryFn: (args: InfiniteTableQueryArgs) => Promise<CursorPage<T>>;
+    columns: Column<T>[];
+    getRowKey: (row: T) => string | number;
+    renderMobileRow?: (row: T) => ReactNode;
+    emptyMessage: string;
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    detailTitle: string | ((item: T) => string);
+    renderDetail: (item: T) => ReactNode;
+    onRowClick?: (row: T) => void;
+    /** The list's region class: each exported list is a region of its own. */
+    region: 'bunny-Invoices' | 'bunny-Quotes' | 'bunny-Transactions';
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
+    displayOptions?: InfiniteResourceTableDisplayOptions;
+    behaviorOptions?: InfiniteResourceTableBehaviorOptions;
+};
+/**
+ * Shell for a paginated resource list with a search bar, title, and a
+ * detail drawer/modal. Owns selection state; delegates data, columns, and
+ * detail rendering to the caller.
+ */
+export default function InfiniteResourceTable<T>({ queryKey, queryFn, columns, getRowKey, renderMobileRow, emptyMessage, searchValue, onSearchChange, detailTitle, renderDetail, onRowClick, region, appearance, displayOptions, behaviorOptions, }: Props<T>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { Column, CursorPage, InfiniteTableQueryArgs } from './types';
+type Props<T> = {
+    /** Base cache key. `rowsPerPage` is appended automatically. */
+    queryKey: readonly unknown[];
+    /** Fetches a single page. Must return a Relay-shaped `CursorPage`. */
+    queryFn: (args: InfiniteTableQueryArgs) => Promise<CursorPage<T>>;
+    /** Extracts a stable React key from each row. */
+    getRowKey: (row: T) => string | number;
+    /** Declarative column configuration. */
+    columns: Column<T>[];
+    /** Invoked when a row is clicked. Presence enables the row-hover cursor. */
+    onRowClick?: (row: T) => void;
+    /** Fallback text shown when the current page has no rows. */
+    emptyMessage?: string;
+    /** Fully custom empty-state renderer; overrides `emptyMessage`. */
+    renderEmpty?: () => ReactNode;
+    /** Force a page size. When omitted the table auto-sizes to the viewport. Must be 1-100. */
+    rowsPerPage?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Escape hatch: on mobile, render each row with this callback instead of the columns grid. */
+    renderMobileRow?: (row: T) => ReactNode;
+};
+declare function InfiniteTable<T>({ queryKey, queryFn, getRowKey, columns, onRowClick, emptyMessage, renderEmpty, rowsPerPage, className, style, renderMobileRow, }: Props<T>): import("react").JSX.Element;
+export default InfiniteTable;

package/dist/esm/types/src/components/tables/InfiniteTable/InfiniteTable.rules.d.ts

@@ -0,0 +1,85 @@
+import type { ResolvedVariables } from '../../../ui/appearance/variables';
+export declare function infiniteTableRules(v: ResolvedVariables): {
+    internal: {
+        '.TableRow > .TableCell': {
+            backgroundColor: string;
+        };
+        '.TableRow .ShowOnHover': {
+            opacity: string;
+        };
+        '.TableRow:hover .ShowOnHover': {
+            opacity: string;
+        };
+        '.Text.TableCaption': {
+            fontSize: string;
+        };
+        '.TablePager': {
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+        };
+        '.Link.ButtonLink.PagerButton': {
+            color: string;
+        };
+        '.Link.ButtonLink.PagerButton:hover': {
+            color: string;
+        };
+        '.Link--current': {
+            color: string;
+            fontWeight: string;
+        };
+        '.Input--compact.SearchInput': {
+            paddingTop: string;
+            paddingBottom: string;
+            borderWidth: string;
+        };
+        '.SearchIcon': {
+            color: string;
+        };
+    };
+    public: {
+        '.Table': {};
+        '.TableCell': {
+            padding: string;
+            fontSize: string;
+            color: string;
+        };
+        '.TableHeaderCell': {
+            color: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        '.TableRow': {};
+        '.TableRow--alternate': {
+            backgroundColor: string;
+        };
+        '.Invoices .Heading': {
+            fontSize: string;
+            lineHeight: string;
+        };
+        '.Quotes .Heading': {
+            fontSize: string;
+            lineHeight: string;
+        };
+        '.Transactions .Heading': {
+            fontSize: string;
+            lineHeight: string;
+        };
+        '.Invoices': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+        '.Quotes': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+        '.Transactions': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+};

package/dist/esm/types/src/components/tables/InfiniteTable/InfiniteTableFooter.d.ts

@@ -0,0 +1,9 @@
+declare const InfiniteTableFooter: ({ currentPageIndex, totalPages, isFetchingNextPage, onClickPageIndex, onClickNextPage, onClickPreviousPage, }: {
+    currentPageIndex: number;
+    totalPages: number;
+    isFetchingNextPage?: boolean;
+    onClickPageIndex: (index: number) => void;
+    onClickNextPage: () => void;
+    onClickPreviousPage: () => void;
+}) => import("react").JSX.Element | null;
+export default InfiniteTableFooter;

package/dist/esm/types/src/components/tables/InfiniteTable/InfiniteTableGridCell.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+/** One cell of the table's grid, for a header or a row. Look comes from the `.TableCell` (and `.TableHeaderCell`) rules. */
+export default function InfiniteTableGridCell({ right, head, gridColumn, children, }: {
+    right?: boolean;
+    head?: boolean;
+    gridColumn?: string | number;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/esm/types/src/components/tables/InfiniteTable/InfiniteTableHeader.d.ts

@@ -0,0 +1,5 @@
+import { Column } from './types';
+declare function InfiniteTableHeader<T>({ columns }: {
+    columns: Column<T>[];
+}): import("react").JSX.Element;
+export default InfiniteTableHeader;

package/dist/esm/types/src/components/tables/InfiniteTable/hooks/useAutoRowsPerPage.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+export declare const MAX_ROWS_PER_PAGE = 100;
+/** Throws if `rowsPerPage` is outside the API's per-request range. Callers pass their component name for a clearer error. */
+export declare function assertRowsPerPage(rowsPerPage: number | undefined, componentName: string): void;
+/**
+ * Returns the number of rows the table can show without introducing an
+ * inner scroll bar, given the current viewport height and the card's
+ * position on screen. When `override` is provided, measurement is skipped
+ * and the override is returned directly.
+ */
+export declare function useAutoRowsPerPage(cardRef: RefObject<HTMLElement | null>, override?: number): number;

package/dist/esm/types/src/components/tables/InfiniteTable/hooks/useContainerWidth.d.ts

@@ -0,0 +1 @@
+export declare function useContainerWidth(): [(el: HTMLElement | null) => void, number];

package/dist/esm/types/src/components/tables/InfiniteTable/index.d.ts

@@ -0,0 +1,4 @@
+export { default as InfiniteTable } from './InfiniteTable';
+export { default as InfiniteResourceTable } from './InfiniteResourceTable';
+export { MAX_ROWS_PER_PAGE, assertRowsPerPage } from './hooks/useAutoRowsPerPage';
+export type { Column, ColumnAlign, CursorPage, InfiniteTableQueryArgs, TableBehaviorOptions, TableDisplayOptions, } from './types';

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

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+export type { CursorPage } from '../../../graphql/queries/paginatedQuery';
+export type ColumnAlign = 'left' | 'right';
+export type Column<T> = {
+    /** Unique identifier for the column; also used as the React key. */
+    key: string;
+    /** Bold header text. Pass an empty string to render no label. */
+    label: string;
+    /** Cell renderer for each row. */
+    render: (row: T) => ReactNode;
+    /** Cell + header alignment. Defaults to 'left'. */
+    align?: ColumnAlign;
+    /** Explicit `grid-template-columns` segment (e.g. `'120px'`, `'auto'`). Ignored when `flex` is true. */
+    width?: string;
+    /** When true, this column takes the remaining space (`3fr`). At most one column should set this. */
+    flex?: boolean;
+};
+export type InfiniteTableQueryArgs = {
+    first: number;
+    after?: string;
+};
+/** Shared display options for the resource table wrappers (Invoices, Quotes, Transactions, ...). */
+export type TableDisplayOptions<ColumnKey extends string> = {
+    /** Whether to show the search bar */
+    showSearchBar?: boolean;
+    /** Whether to show the title */
+    showTitle?: boolean;
+    /** The title to display above the list */
+    title?: string;
+    /** The columns to display */
+    columns?: ColumnKey[];
+    /** A custom class name to apply to the component */
+    className?: string;
+    /** A custom style to apply to the component */
+    style?: React.CSSProperties;
+    /** Whether to open the row detail in a modal instead of a drawer */
+    useModal?: boolean;
+    /** A custom class name to apply to the search bar */
+    searchBarClassName?: string;
+    /** Message to display when the list is empty */
+    emptyMessage?: string;
+};
+/** Shared behavior options for the resource table wrappers. */
+export type TableBehaviorOptions = {
+    /** Whether to suppress the row detail drawer/modal on row click */
+    suppressDetail?: boolean;
+    /** Force a specific number of rows per page. When omitted the table
+     *  auto-sizes based on the available viewport height. Must be between
+     *  1 and 100 (the API's per-request cap). */
+    rowsPerPage?: number;
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import Invoice from '../../../types/Invoice';
+import type { Appearance } from '../../../ui/appearance';
+import { TableBehaviorOptions, TableDisplayOptions } from '../InfiniteTable';
+import { InvoiceColumnKey, InvoiceDateType } from './invoicesList/getInvoiceColumns';
+export type InvoicesDisplayOptions = TableDisplayOptions<InvoiceColumnKey>;
+export type InvoicesBehaviorOptions = TableBehaviorOptions & {
+    /** The type of date to display for invoices. */
+    invoiceDateType?: InvoiceDateType;
+    /** Whether to hide the payment form on invoices */
+    hidePaymentForm?: boolean;
+};
+export default function Invoices({ invoiceComponent, onInvoiceClick, filter, sort, appearance, displayOptions, behaviorOptions, }: {
+    /** A custom component to render instead of the default invoice component */
+    invoiceComponent?: React.ReactNode;
+    /** A function to call when an invoice is clicked */
+    onInvoiceClick?: (invoice: Invoice) => void;
+    /** Filter expression applied server-side, e.g. `"invoice.amount is 100"`.
+     * Docs: https://docs.bunny.com/developer/getting-started/using-filters-in-queries
+     */
+    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?: InvoicesDisplayOptions;
+    behaviorOptions?: InvoicesBehaviorOptions;
+}): React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Invoices from './Invoices';
+declare const meta: Meta<typeof Invoices>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithModal: Story;
+export declare const Mobile: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/tables/Invoices/index.d.ts

@@ -0,0 +1 @@
+export { default as Invoices } from './Invoices';

package/dist/esm/types/src/components/tables/Invoices/invoicesList/InvoiceMobileRow.d.ts

@@ -0,0 +1,10 @@
+import Invoice from '@/types/Invoice';
+import { InvoiceColumnKey, InvoiceDateType } from './getInvoiceColumns';
+declare const InvoiceMobileRow: ({ invoice, columns, invoiceDateType, token, apiHost, }: {
+    invoice: Invoice;
+    columns: InvoiceColumnKey[];
+    invoiceDateType: InvoiceDateType;
+    token: string | undefined;
+    apiHost: string;
+}) => import("react").JSX.Element;
+export default InvoiceMobileRow;

package/dist/esm/types/src/components/tables/Invoices/invoicesList/getInvoiceColumns.d.ts

@@ -0,0 +1,22 @@
+import Invoice from '../../../../types/Invoice';
+import { Column } from '../../InfiniteTable';
+export type InvoiceColumnKey = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';
+export type InvoiceDateType = 'createdAt' | 'issuedAt' | 'dueAt';
+declare const invoiceDateToDisplay: (invoice: Invoice, dateType: InvoiceDateType) => string;
+declare const InvoiceDownload: ({ invoiceId, token, apiHost, }: {
+    invoiceId: string;
+    token: string | undefined;
+    apiHost: string;
+}) => import("react").JSX.Element;
+/**
+ * Builds the `Column<Invoice>[]` config passed to `<InfiniteTable />` from the
+ * caller-facing `columns` prop of `<Invoices />`.
+ */
+export declare function getInvoiceColumns({ columns, invoiceDateType, token, apiHost, }: {
+    columns: InvoiceColumnKey[];
+    invoiceDateType: InvoiceDateType;
+    token: string | undefined;
+    apiHost: string;
+}): Column<Invoice>[];
+export { InvoiceDownload, invoiceDateToDisplay };
+export default getInvoiceColumns;