@peax/consent-banner-react 0.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,198 @@
+# @peax/consent-banner-react
+
+A React cookie banner with compact and stacked layouts, built-in preferences, and typed consent events.
+
+[Peax Consent](https://github.com/peaxco/consent/blob/main/README.md) · [All guides](https://github.com/peaxco/consent/blob/main/docs/README.md) · [Theme](https://github.com/peaxco/consent/blob/main/packages/consent-banner-theme/README.md) · [Locales](https://github.com/peaxco/consent/blob/main/packages/consent-banner-locales/README.md)
+
+[Quick start](#quick-start) · [Props](#props) · [Events](#events) · [Preferences](#preferences) · [Layouts](#layouts)
+
+## Quick start
+
+**Requires React 18.2+ (18.x) or 19.x, with matching React DOM.** ESM and TypeScript declarations are included.
+
+```sh
+npm install @peax/consent-banner-react @peax/consent-banner-theme
+```
+
+Import the stylesheet once in your application entry. Locales are already a dependency; install `@peax/consent-banner-locales` directly if your application imports its dictionaries or types.
+
+The example below uses the three default categories. Supply previously saved choices as `initialPreferences` (`null` for a new visitor), and connect `onCommit` to your consent storage and service controls.
+
+```tsx
+import { useState } from 'react'
+import { Banner } from '@peax/consent-banner-react'
+import '@peax/consent-banner-theme/styles.css'
+
+type Preferences = Record<string, boolean>
+
+type Props = {
+  initialPreferences: Preferences | null
+  onCommit: (preferences: Preferences) => void
+}
+
+export function CookieBanner({ initialPreferences, onCommit }: Props) {
+  const [open, setOpen] = useState(initialPreferences === null)
+  const [preferences, setPreferences] = useState(initialPreferences ?? {})
+
+  function commit(next: Preferences) {
+    onCommit(next) // Your application saves and enforces this decision.
+    setPreferences(next)
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>Cookie choices</button>
+      <Banner
+        isOpen={open}
+        cookiePolicyUrl="/cookies"
+        preferencesContent={Object.fromEntries(
+          Object.entries(preferences).map(([id, checked]) => [id, { checked }]),
+        )}
+        onMsg={msg => {
+          switch (msg.type) {
+            case 'on_accept_all':
+              commit({ essential: true, analytics: true, marketing: true })
+              break
+            case 'on_reject_all':
+              commit({ essential: true, analytics: false, marketing: false })
+              break
+            case 'on_apply_preferences':
+              commit(msg.preferences)
+              break
+          }
+        }}
+      />
+    </>
+  )
+}
+```
+
+**Your application completes the integration:**
+
+1. Restore saved consent before initializing this wrapper; keep server and client initial props consistent.
+2. Keep optional services blocked until the relevant consent is granted. Save and enforce decisions in `onCommit`, including later revocation.
+3. Adapt the Accept/Reject maps if you change the selected categories or their behavior.
+4. Keep the banner mounted and change `isOpen` to play its exit animation. The “Cookie choices” button above reopens it.
+
+The banner manages UI and temporary drafts. It does not store consent, load trackers, or depend on `@peax/consent-core`.
+
+## Props
+
+All `BannerProps` fields are optional. **`isOpen` defaults to `false`**, so pass it to display the banner.
+
+### Visibility and layout
+
+| Prop | Default | Purpose |
+| --- | --- | --- |
+| `isOpen` | `false` | Show or hide the banner |
+| `variant` | `'compact'` | `'compact'` or `'stacked'` |
+| `showCustomizePreferences` | `true` | Show the preferences trigger, whether icon or text |
+| `hasAcceptRejectEqualWeight` | `false` | Give Accept and Reject the same secondary button appearance |
+| `position` | `'right'` | `'left'`, `'center'`, or `'right'` |
+| `slideFrom` | `'bottom'` | Bottom, or the matching side for left/right positioning |
+| `appearanceDelay` | `0` | Delay the first appearance, in milliseconds |
+
+### Content and preferences
+
+| Prop | Default | Purpose |
+| --- | --- | --- |
+| `locale` | `'en'` | Select English/German; regional tags fall back to their base language |
+| `cookiePolicyUrl` | Omitted | Destination for policy links; without it, labels are plain text |
+| `bannerContent` | Locale dictionary | Partial `BannerMessages` overrides for banner and preferences copy |
+| `preferencesSections` | `['essential', 'analytics', 'marketing']` | Ordered visible section IDs; `[]` displays no sections |
+| `preferencesContent` | Built-in section defaults | Overrides keyed by section ID; see [Preferences](#preferences) |
+
+### Styling and events
+
+| Prop | Default | Purpose |
+| --- | --- | --- |
+| `theme` | `'auto'` | Host theme: `'light'`, `'dark'`, or system preference |
+| `className` | Omitted | Class on the banner's `.pxc` root |
+| `style` | Omitted | Inline styles on that same root |
+| `onMsg` | Omitted | `(msg: BannerMsg) => void`; see the event contract below |
+
+## Events
+
+All interactions use `onMsg`. The three decision events leave the banner open until your application changes `isOpen`.
+
+| Message `type` | Additional payload | Integration behavior |
+| --- | --- | --- |
+| `on_accept_all` | None | Grant the applicable categories, save, enforce, and close |
+| `on_reject_all` | None | Reject optional categories, save, enforce, and close |
+| `on_apply_preferences` | `preferences: Record<string, boolean>` | Save and enforce the supplied selection, then close |
+| `on_change_preference` | `sectionId`, `checked` | Observe a draft edit; do not treat it as applied consent |
+| `on_open_preferences` | None | Notification; the panel opens internally |
+| `on_close_preferences` | None | Notification; Close/Escape discards drafts and returns to the banner |
+
+Apply includes every selected section ID, including disabled sections. Closing preferences never grants consent. External closure through `isOpen={false}` resets the draft without emitting `on_close_preferences`.
+
+## Preferences
+
+Select IDs, then override only the fields you need:
+
+```tsx
+<Banner
+  isOpen
+  preferencesSections={['essential', 'analytics', 'marketing']}
+  preferencesContent={{ essential: { title: 'Required cookies' } }}
+/>
+```
+
+This changes the Essential title while retaining its description and behavior. Analytics and Marketing retain all their defaults.
+
+| Section ID | Checked | Disabled | Copy |
+| --- | --- | --- | --- |
+| `essential` | `true` | `true` | From the selected locale |
+| `analytics` | `false` | `false` | From the selected locale |
+| `marketing` | `false` | `false` | From the selected locale |
+| Any custom string | `false` | `false` | ID as title; no description |
+
+- `preferencesSections` controls visibility and order; an override alone does not add a section. Empty or whitespace-only IDs are omitted, other IDs are preserved exactly, and duplicate IDs appear once.
+- Each override accepts `title`, `text`, `checked`, and `disabled`. Omitted/nullish fields retain defaults; `false` is respected and `text: ''` hides the description. Empty or whitespace-only titles fall back to the localized built-in title or custom ID to keep switches named.
+- `PreferencesSectionId` suggests built-in IDs while accepting custom strings.
+- `showCustomizePreferences={false}` removes the trigger in every layout. Changing it does not close an already open panel.
+
+See [Cookie preferences](https://github.com/peaxco/consent/blob/main/docs/preferences.md) for custom categories, draft reconciliation, accessibility, and migration from the earlier array API.
+
+## Layouts
+
+| Variant | Presentation | Sizing |
+| --- | --- | --- |
+| `compact` | Cookie icon and paragraph; preferences icon becomes a centered text action when space is tight | Fills available width, up to an 800px outer limit including gutters |
+| `stacked` | Cookie icon and heading, paragraph, decision buttons, then a centered preferences label | 420px card on desktop; fills the space inside gutters below 768px |
+
+In compact mode, actions adapt to their actual label widths:
+
+| Available space | Visible order |
+| --- | --- |
+| All three controls fit | Preferences icon → Reject → Accept |
+| Only decisions fit together | Reject + Accept, then Customize preferences |
+| Decisions need separate rows | Accept → Reject → Customize preferences |
+
+Both variants support wrapping labels and scrolling on short viewports. Preferences opens the same nonmodal panel, with a scrolling body and fixed header/footer. Close/Escape restores focus to the visible trigger.
+
+Keyboard order follows visual order where `reading-flow` is supported; otherwise compact controls retain Accept → Reject → Preferences DOM order. The preferences panel does not trap focus.
+
+## Styling and localization
+
+| Change | Use | Details |
+| --- | --- | --- |
+| Colors, spacing, radii, theme mode | Public `--pxc-*` variables on the root | [Theme package](https://github.com/peaxco/consent/blob/main/packages/consent-banner-theme/README.md) |
+| Body/heading fonts and text size | Typography tokens; load fonts in your application | [Typography guide](https://github.com/peaxco/consent/blob/main/docs/typography.md) |
+| Language and button text | `locale`, `bannerContent` | [Locales package](https://github.com/peaxco/consent/blob/main/packages/consent-banner-locales/README.md) |
+| Section titles/descriptions | `preferencesContent` | [Preferences guide](https://github.com/peaxco/consent/blob/main/docs/preferences.md) |
+| A translated policy link | `<cookiePolicy>label</cookiePolicy>` plus `cookiePolicyUrl` | [Localized links](https://github.com/peaxco/consent/blob/main/docs/localization.md#localized-links) |
+
+## Runtime and public exports
+
+- Import `Banner` and types `BannerProps`, `BannerMsg`, `PreferencesSection`, and `PreferencesSectionId` from the package root. Deep imports are unsupported.
+- The JavaScript entry is safe for SSR and does not import CSS. Load `@peax/consent-banner-theme/styles.css` separately; there is no React CSS entry.
+- In an application with React Server Components, render the interactive banner through a client component. Locale selection is explicit, so use matching initial props during hydration.
+- Mount outside restrictive ancestor stacking contexts. The wrapper's default z-index is `1000`; override `--pxc-z-index` when needed.
+
+## Development
+
+Run `yarn workspace @peax/consent-banner-react dev` from the repository. The demo supports `?variant=stacked`, `?locale=de`, and `?showCustomizePreferences=false`. Theme edits update live from source.
+
+See [Banner verification](https://github.com/peaxco/consent/blob/main/docs/engineering/banner-verification.md) for browser setup and snapshot checks, and [Contributing](https://github.com/peaxco/consent/blob/main/CONTRIBUTING.md) for repository commands.

package/dist/index.d.ts

@@ -0,0 +1,55 @@
+import { BannerMessages } from '@peax/consent-banner-locales';
+import { BuiltInPreferencesSectionId } from '@peax/consent-banner-locales';
+import { NamedExoticComponent } from 'react';
+
+export declare const Banner: NamedExoticComponent<BannerProps>;
+
+export declare type BannerMsg = {
+    type: 'on_accept_all' | 'on_reject_all' | 'on_open_preferences' | 'on_close_preferences';
+} | {
+    type: 'on_apply_preferences';
+    preferences: Record<string, boolean>;
+} | {
+    type: 'on_change_preference';
+    sectionId: PreferencesSectionId;
+    checked: boolean;
+};
+
+export declare type BannerProps = Placement & {
+    isOpen?: boolean;
+    appearanceDelay?: number;
+    hasAcceptRejectEqualWeight?: boolean;
+    showCustomizePreferences?: boolean;
+    variant?: 'compact' | 'stacked';
+    locale?: string;
+    cookiePolicyUrl?: string;
+    bannerContent?: Partial<BannerMessages>;
+    preferencesSections?: readonly PreferencesSectionId[];
+    preferencesContent?: Readonly<Partial<Record<PreferencesSectionId, PreferencesSection>>>;
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: 'light' | 'dark' | 'auto';
+    onMsg?: (msg: BannerMsg) => void;
+};
+
+declare type Placement = {
+    position?: 'right';
+    slideFrom?: 'bottom' | 'right';
+} | {
+    position: 'left';
+    slideFrom?: 'bottom' | 'left';
+} | {
+    position: 'center';
+    slideFrom?: 'bottom';
+};
+
+export declare type PreferencesSection = Readonly<{
+    title?: string;
+    text?: string;
+    checked?: boolean;
+    disabled?: boolean;
+}>;
+
+export declare type PreferencesSectionId = BuiltInPreferencesSectionId | (string & Record<never, never>);
+
+export { }

package/dist/index.js

@@ -0,0 +1,433 @@
+import e from "clsx";
+import { getMessages as t, getPreferencesMessages as n, parseMessage as r, resolveLocale as i } from "@peax/consent-banner-locales";
+import { forwardRef as a, memo as o, useCallback as s, useEffect as c, useId as l, useMemo as u, useRef as d, useState as f } from "react";
+import { AnimatePresence as p, LazyMotion as m, domAnimation as h, useIsPresent as g, useReducedMotion as _ } from "framer-motion";
+import * as v from "framer-motion/m";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { ScrollArea as S } from "@base-ui/react/scroll-area";
+import { Button as C } from "@base-ui/react/button";
+import { Switch as w } from "@base-ui/react/switch";
+//#region src/utils/notReachable.ts
+function T(e, t = { throwError: !0 }) {
+	let n = `Should not be reached ${e}`;
+	if (t.throwError) throw Error(n);
+}
+//#endregion
+//#region src/components/Container/ContainerWrapper.tsx
+var E = ({ position: t, slideFrom: n, children: r }) => {
+	let i = g(), a = _(), o = d(null), s = d(null);
+	c(() => {
+		let e = o.current;
+		if (e) {
+			if (i) {
+				e.removeAttribute("inert");
+				let t = document.activeElement;
+				t instanceof HTMLElement && !e.contains(t) && (s.current = t);
+				return;
+			}
+			if (e.contains(document.activeElement)) {
+				let e = s.current;
+				e?.isConnected && e.focus({ preventScroll: !0 });
+			}
+			e.setAttribute("inert", "");
+		}
+	}, [i]);
+	let l = n === t ? n : "bottom", u = { transform: a ? "none" : l === "bottom" ? "translateY(100%)" : `translateX(${l === "left" ? "-100%" : "100%"})` };
+	return /* @__PURE__ */ b(v.div, {
+		ref: o,
+		exit: u,
+		initial: u,
+		animate: { transform: "none" },
+		"aria-hidden": !i || void 0,
+		"data-state": i ? "open" : "closing",
+		className: e("pxc-wrapper", `pxc-wrapper--${t}`),
+		transition: {
+			duration: a ? 0 : i ? .36 : .28,
+			ease: i ? [
+				.16,
+				1,
+				.3,
+				1
+			] : [
+				.4,
+				0,
+				.2,
+				1
+			]
+		},
+		children: r
+	});
+}, D = a(function({ isOpen: t = !0, appearanceDelay: n = 0, position: r = "right", slideFrom: i = "bottom", className: a, children: o, actions: s, ...l }, u) {
+	let d = Number.isFinite(n) ? Math.max(0, n) : 0, [g, _] = f(d === 0);
+	return c(() => {
+		if (g || !t) return;
+		let e = window.setTimeout(() => _(!0), d);
+		return () => window.clearTimeout(e);
+	}, [
+		d,
+		t,
+		g
+	]), /* @__PURE__ */ b(m, {
+		features: h,
+		strict: !0,
+		children: /* @__PURE__ */ b(p, { children: t && g && /* @__PURE__ */ b(E, {
+			position: r,
+			slideFrom: i,
+			children: /* @__PURE__ */ b("div", {
+				ref: u,
+				className: e("pxc-container", s != null && "pxc-container--with-actions", a),
+				...l,
+				children: s == null ? o : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
+					className: "pxc-container__content",
+					"data-container-content": !0,
+					children: o
+				}), /* @__PURE__ */ b("div", {
+					className: "pxc-container__actions",
+					"data-container-actions": !0,
+					children: s
+				})] })
+			})
+		}, "container") })
+	});
+}), O = () => /* @__PURE__ */ x("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [
+		/* @__PURE__ */ b("path", { d: "M11 17H11.01" }),
+		/* @__PURE__ */ b("path", { d: "M12.025 2.61499C12.054 2.29199 11.82 1.98399 11.496 1.99999C9.02138 2.12561 6.68155 3.16546 4.92997 4.91799C3.0533 6.79479 1.99905 9.34023 1.99915 11.9943C1.99924 14.6484 3.05367 17.1938 4.93047 19.0705C6.80728 20.9472 9.35272 22.0014 12.0068 22.0013C14.6609 22.0012 17.2063 20.9468 19.083 19.07C20.8344 17.3179 21.8732 14.9782 21.998 12.504C22.014 12.181 21.707 11.947 21.384 11.977C20.8082 12.0311 20.2276 11.9597 19.6821 11.7677C19.1366 11.5757 18.6392 11.2678 18.2242 10.865C17.8092 10.4623 17.4864 9.97436 17.2782 9.43485C17.07 8.89535 16.9812 8.31711 17.018 7.73999C17.0244 7.63881 17.0093 7.53742 16.9734 7.44257C16.9376 7.34773 16.882 7.26161 16.8103 7.18997C16.7385 7.11833 16.6523 7.06281 16.5574 7.02712C16.4626 6.99143 16.3611 6.97638 16.26 6.98299C15.6828 7.01952 15.1046 6.93048 14.5652 6.72199C14.0258 6.51351 13.538 6.19054 13.1355 5.77535C12.7329 5.36015 12.4252 4.86261 12.2335 4.31701C12.0417 3.77141 11.9706 3.19073 12.025 2.61499Z" }),
+		/* @__PURE__ */ b("path", { d: "M12 12H12.01" }),
+		/* @__PURE__ */ b("path", { d: "M16 16H16.01" }),
+		/* @__PURE__ */ b("path", { d: "M7 14H7.01" }),
+		/* @__PURE__ */ b("path", { d: "M9 8H9.01" })
+	]
+}), k = () => /* @__PURE__ */ x("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [
+		/* @__PURE__ */ b("path", { d: "M14 17H5" }),
+		/* @__PURE__ */ b("path", { d: "M19 7h-9" }),
+		/* @__PURE__ */ b("circle", {
+			cx: "17",
+			cy: "17",
+			r: "3"
+		}),
+		/* @__PURE__ */ b("circle", {
+			cx: "7",
+			cy: "7",
+			r: "3"
+		})
+	]
+}), A = () => /* @__PURE__ */ b("div", {
+	className: "pxc-lead-icon",
+	children: /* @__PURE__ */ b(O, {})
+}), j = () => /* @__PURE__ */ b("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ b("path", { d: "m6 6 12 12M6 18 18 6" })
+}), M = a(function({ variant: t, className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ b(C, {
+		ref: a,
+		className: (r) => e("pxc-button", `pxc-button--${t}`, typeof n == "function" ? n(r) : n),
+		...i,
+		focusableWhenDisabled: !1,
+		children: r
+	});
+}), N = (e) => {
+	if (e?.trim()) try {
+		let t = new URL(e, "https://consent.invalid");
+		return t.protocol === "http:" || t.protocol === "https:" ? e : void 0;
+	} catch {
+		return;
+	}
+}, P = ({ message: e, links: t }) => u(() => r(e, Object.keys(t)), [e, t]).map((e) => {
+	if (e.type === "text") return e.value;
+	let n = N(t[e.name]);
+	return n && e.value.trim() ? /* @__PURE__ */ b("a", {
+		className: "pxc-link",
+		href: n,
+		children: e.value
+	}, e.offset) : e.value;
+}), F = ({ section: e, checked: t, links: n, onMsg: r }) => {
+	let i = l();
+	return /* @__PURE__ */ x("section", {
+		className: "pxc-preferences__section",
+		"aria-labelledby": `${i}-title`,
+		children: [/* @__PURE__ */ x("div", {
+			className: "pxc-preferences__section-heading",
+			children: [/* @__PURE__ */ b("h4", {
+				id: `${i}-title`,
+				className: "pxc-text--h4",
+				children: e.title
+			}), /* @__PURE__ */ b(w.Root, {
+				className: "pxc-switch",
+				checked: t,
+				disabled: e.disabled ?? !1,
+				"aria-labelledby": `${i}-title`,
+				"aria-describedby": e.text ? `${i}-text` : void 0,
+				onCheckedChange: (t) => r({
+					type: "on_change_preference",
+					sectionId: e.id,
+					checked: t
+				}),
+				children: /* @__PURE__ */ b(w.Thumb, { className: "pxc-switch__thumb" })
+			})]
+		}), e.text && /* @__PURE__ */ b("p", {
+			id: `${i}-text`,
+			className: "pxc-text--paragraph pxc-preferences__description",
+			children: /* @__PURE__ */ b(P, {
+				message: e.text,
+				links: n
+			})
+		})]
+	});
+}, I = ({ sections: e, content: t, links: n, onMsg: r }) => {
+	let i = l(), a = d(null), [o, s] = f(() => new Map(e.map((e) => [e.id, e.checked]))), u = new Map(e.map((e) => [e.id, e.disabled ? e.checked : o.get(e.id) ?? e.checked]));
+	(o.size !== u.size || [...u].some(([e, t]) => o.get(e) !== t)) && s(u), c(() => {
+		a.current?.focus({ preventScroll: !0 });
+	}, []);
+	let p = N(n.cookiePolicy);
+	return /* @__PURE__ */ x("section", {
+		className: "pxc-preferences",
+		"aria-labelledby": i,
+		onKeyDown: (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), r({ type: "on_close_preferences" }));
+		},
+		children: [
+			/* @__PURE__ */ x("header", {
+				className: "pxc-preferences__header",
+				children: [/* @__PURE__ */ b("h3", {
+					id: i,
+					ref: a,
+					tabIndex: -1,
+					className: "pxc-text--h3",
+					children: t.preferencesTitle
+				}), /* @__PURE__ */ b(M, {
+					variant: "iconed",
+					"aria-label": t.closePreferencesLabel,
+					onClick: () => r({ type: "on_close_preferences" }),
+					children: /* @__PURE__ */ b(j, {})
+				})]
+			}),
+			/* @__PURE__ */ x(S.Root, {
+				className: "pxc-preferences__scroll-area",
+				children: [/* @__PURE__ */ b(S.Viewport, {
+					className: "pxc-preferences__body",
+					role: "group",
+					"aria-labelledby": i,
+					children: /* @__PURE__ */ x(S.Content, {
+						className: "pxc-preferences__content",
+						children: [t.preferencesText && /* @__PURE__ */ b("p", {
+							className: "pxc-text--paragraph pxc-preferences__introduction",
+							children: /* @__PURE__ */ b(P, {
+								message: t.preferencesText,
+								links: n
+							})
+						}), e.map((e) => /* @__PURE__ */ b(F, {
+							section: e,
+							checked: u.get(e.id) ?? e.checked,
+							links: n,
+							onMsg: (e) => {
+								switch (e.type) {
+									case "on_change_preference":
+										s((t) => new Map(t).set(e.sectionId, e.checked)), r(e);
+										break;
+									default: T(e.type);
+								}
+							}
+						}, e.id))]
+					})
+				}), /* @__PURE__ */ b(S.Scrollbar, {
+					className: "pxc-preferences__scrollbar",
+					children: /* @__PURE__ */ b(S.Thumb, {
+						className: "pxc-preferences__scroll-thumb",
+						children: /* @__PURE__ */ b("span", { className: "pxc-preferences__scroll-indicator" })
+					})
+				})]
+			}),
+			/* @__PURE__ */ x("footer", {
+				className: "pxc-preferences__footer",
+				children: [/* @__PURE__ */ b(M, {
+					variant: "primary",
+					onClick: () => r({
+						type: "on_apply_preferences",
+						preferences: Object.fromEntries(u)
+					}),
+					children: t.applyPreferencesLabel
+				}), p ? /* @__PURE__ */ b("a", {
+					className: "pxc-link pxc-preferences__policy",
+					href: p,
+					children: t.cookiePolicyLabel
+				}) : /* @__PURE__ */ b("span", {
+					className: "pxc-preferences__policy",
+					children: t.cookiePolicyLabel
+				})]
+			})
+		]
+	});
+}, L = [
+	"essential",
+	"analytics",
+	"marketing"
+];
+function R(e, t, n) {
+	let r = new Map(Object.entries(n));
+	return [...new Set(e.filter((e) => e.trim()))].map((e) => {
+		let n = r.get(e), i = t && Object.hasOwn(t, e) ? t[e] : void 0;
+		return {
+			id: e,
+			title: i?.title?.trim() ? i.title : n?.title ?? e,
+			text: i?.text ?? n?.text ?? "",
+			checked: i?.checked ?? e === "essential",
+			disabled: i?.disabled ?? e === "essential"
+		};
+	});
+}
+//#endregion
+//#region src/components/Text/Text.tsx
+var z = ({ variant: e, tag: t, children: n }) => {
+	switch (e) {
+		case "label": return /* @__PURE__ */ b(t, {
+			className: "pxc-text--label",
+			children: n
+		});
+		case "heading": return /* @__PURE__ */ b(t, {
+			className: `pxc-text--${t}`,
+			children: n
+		});
+		case "paragraph": return /* @__PURE__ */ b("p", {
+			className: "pxc-text--paragraph",
+			children: n
+		});
+		default: return T(e);
+	}
+}, B = ({ variant: e, content: t, equalWeight: n, showCustomizePreferences: r, preferencesRef: i, onMsg: a }) => /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ x("div", {
+	className: "pxc-banner__choices",
+	children: [/* @__PURE__ */ b(M, {
+		variant: n ? "secondary" : "primary",
+		onClick: () => a({ type: "on_accept_all" }),
+		children: t.acceptAllLabel
+	}), /* @__PURE__ */ b(M, {
+		variant: "secondary",
+		onClick: () => a({ type: "on_reject_all" }),
+		children: t.rejectAllLabel
+	})]
+}), r && /* @__PURE__ */ b("div", {
+	className: "pxc-banner__preferences",
+	children: /* @__PURE__ */ b(M, {
+		ref: i,
+		variant: "inline",
+		className: e === "compact" ? "pxc-button--iconed" : void 0,
+		"aria-label": t.customizePreferencesLabel,
+		onClick: () => a({ type: "on_open_preferences" }),
+		children: e === "compact" ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(k, {}), /* @__PURE__ */ b("span", { children: t.customizePreferencesLabel })] }) : t.customizePreferencesLabel
+	})
+})] }), V = o(function({ bannerContent: r, cookiePolicyUrl: a, isOpen: o = !1, appearanceDelay: l = 0, preferencesSections: p = L, preferencesContent: m, hasAcceptRejectEqualWeight: h = !1, showCustomizePreferences: g = !0, variant: _ = "compact", theme: v = "auto", locale: S = "en", onMsg: C, className: w, style: E, ...O }) {
+	let k = i(S), j = t(k), M = Object.fromEntries(Object.entries(r ?? {}).filter(([, e]) => e != null)), N = {
+		...j,
+		...M
+	}, F = u(() => ({ cookiePolicy: a }), [a]), V = u(() => R(p, m, n(k)), [
+		p,
+		m,
+		k
+	]), [H, U] = f(!1), W = d(!1), G = s((e) => {
+		e && W.current && (W.current = !1, e.focus());
+	}, []);
+	c(() => {
+		o || (W.current = !1, U(!1));
+	}, [o]);
+	let K = () => {
+		U(!0), C?.({ type: "on_open_preferences" });
+	}, q = () => {
+		W.current = g, U(!1), C?.({ type: "on_close_preferences" });
+	};
+	return /* @__PURE__ */ b("div", {
+		"data-theme": v,
+		"data-banner-variant": _,
+		className: e("pxc", w),
+		style: {
+			fontFamily: "var(--pxc-font-family)",
+			...E
+		},
+		lang: k,
+		children: /* @__PURE__ */ b(D, {
+			...O,
+			isOpen: !!o,
+			appearanceDelay: l,
+			className: H ? "pxc-container--preferences" : void 0,
+			actions: H ? null : /* @__PURE__ */ b(B, {
+				variant: _,
+				content: N,
+				equalWeight: h,
+				showCustomizePreferences: g,
+				preferencesRef: G,
+				onMsg: (e) => {
+					switch (e.type) {
+						case "on_open_preferences":
+							K();
+							break;
+						case "on_accept_all":
+						case "on_reject_all":
+							C?.(e);
+							break;
+						default: T(e.type);
+					}
+				}
+			}),
+			children: H ? /* @__PURE__ */ b(I, {
+				links: F,
+				content: N,
+				sections: V,
+				onMsg: (e) => {
+					switch (e.type) {
+						case "on_close_preferences":
+							q();
+							break;
+						case "on_apply_preferences":
+						case "on_change_preference":
+							C?.(e);
+							break;
+						default: T(e);
+					}
+				}
+			}) : /* @__PURE__ */ x(y, { children: [_ === "stacked" ? /* @__PURE__ */ x("div", {
+				className: "pxc-banner__heading",
+				children: [/* @__PURE__ */ b(A, {}), /* @__PURE__ */ b(z, {
+					variant: "heading",
+					tag: "h3",
+					children: N.title
+				})]
+			}) : /* @__PURE__ */ b(A, {}), /* @__PURE__ */ b(z, {
+				variant: "paragraph",
+				children: /* @__PURE__ */ b(P, {
+					message: N.collapsedText,
+					links: F
+				})
+			})] })
+		})
+	});
+});
+//#endregion
+export { V as Banner };

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@peax/consent-banner-react",
+  "version": "0.1.0",
+  "description": "Accessible React bindings and components for Peax Consent.",
+  "keywords": [
+    "consent-management",
+    "cookie-consent",
+    "privacy",
+    "gdpr",
+    "react",
+    "accessibility",
+    "components"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/peaxco/consent",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/peaxco/consent.git",
+    "directory": "packages/consent-banner-react"
+  },
+  "bugs": {
+    "url": "https://github.com/peaxco/consent/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite src/demo --config vite.config.ts",
+    "test": "vitest run",
+    "test:browser": "vitest run --config vitest.browser.config.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@peax/consent-banner-locales": "^0.1.0",
+    "@peax/consent-banner-theme": "^0.1.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^13.1.1"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
+    "@fontsource/figtree": "^5.3.0",
+    "@fontsource/poppins": "^5.3.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/jest-image-snapshot": "^6.4.1",
+    "@types/node": "^26.3.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@unocss/reset": "^66.8.1",
+    "@vitejs/plugin-react": "^6.1.0",
+    "jest-image-snapshot": "^6.5.2",
+    "jsdom": "30.0.1",
+    "playwright": "^1.62.1",
+    "playwright-core": "1.62.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "5.9.3",
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.11"
+  }
+}