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

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/components/CheckoutShared → cjs/types/src/ui/appearance}/stories/themes.d.ts

@@ -1,5 +1,5 @@
 import type { Decorator } from '@storybook/react-vite';
-import type { Appearance } from '../appearance';
+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.
@@ -7,9 +7,9 @@ import type { Appearance } from '../appearance';
 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). Needs `darkMode` on BunnyProvider. */
+/** 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, dark mode. */
+/** 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;
@@ -22,13 +22,18 @@ export declare const midnightStory: {
     };
     decorators: Decorator[];
     parameters: {
-        darkMode: boolean;
         backgrounds: {
-            default: string;
-            values: {
-                name: string;
-                value: string;
-            }[];
+            options: {
+                dark: {
+                    name: string;
+                    value: string;
+                };
+            };
+        };
+    };
+    globals: {
+        backgrounds: {
+            value: string;
         };
     };
 };