@bunnyapp/components 1.8.6 → 2.0.0-beta.1

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,19 @@
+import { ReactNode, type CSSProperties } from 'react';
+import { type ResolvedAppearance } from './resolveAppearance';
+import type { Appearance } from './types';
+export declare function useResolvedAppearance(): ResolvedAppearance;
+/** The font our text inherits from the page, for a payment provider's fields, which can't inherit it. */
+export declare function usePageFontFamily(): string | undefined;
+/** 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,32 @@
+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;
+};
+/**
+ * `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): 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;
+    };
+};