@consenti/ui 0.1.0

package/dist/react.d.ts

@@ -0,0 +1,452 @@
+type ConsentStatus = 'granted' | 'denied' | 'objected';
+type ConsentValue = Record<string, ConsentStatus>;
+interface Cookie {
+    id: string;
+    type?: 'consent' | 'legitimate_interest';
+    mandatory?: boolean;
+    listenGpc?: boolean;
+    expiry?: number;
+    tcfVendorId?: number;
+    tcfPurposes?: number[];
+    cpraCategory?: 'sale' | 'sharing' | 'sensitive';
+}
+type ButtonStyle = 'primary' | 'secondary' | 'text' | 'accent';
+type ButtonAction = 'submit' | 'manage' | 'close' | 'custom' | 'link';
+interface Button {
+    text: string;
+    style: ButtonStyle;
+    action: ButtonAction;
+    cookies?: string[] | '*' | '!';
+    url?: string;
+}
+interface MainBanner {
+    position: 'top' | 'bottom' | 'middle' | 'left-bottom' | 'right-bottom';
+    overlayOpacity?: number;
+    showClose?: boolean;
+    showLocaleSwitcher?: boolean;
+    heading?: string;
+    headingTag?: string;
+    htmlText: string;
+    buttons: Button[];
+}
+type GpcBanner = MainBanner;
+interface Category {
+    id: string;
+    heading: string;
+    headingTag?: string;
+    htmlText: string;
+    mandatory?: boolean;
+    type?: 'consent' | 'legitimate_interest';
+    legitimateInterest?: {
+        enabled?: boolean;
+        description?: string;
+    };
+    cookies: string[];
+}
+interface PreferenceModal {
+    position?: 'left' | 'right' | 'center';
+    overlayOpacity?: number;
+    showClose?: boolean;
+    showLocaleSwitcher?: boolean;
+    heading?: string;
+    headingTag?: string;
+    subheading?: string;
+    htmlText?: string;
+    buttons: Button[];
+    categories: Category[];
+    persistent?: boolean;
+}
+interface DpdpaConfig {
+    dataFiduciary: string;
+    grievanceEmail: string;
+    purposeDescription?: string;
+}
+interface ResolvedProfile {
+    id: number;
+    version: number;
+    defaultLocale: string;
+    locales?: string[];
+    cookies: Cookie[];
+    mainBanner: MainBanner;
+    gpcBanner?: GpcBanner;
+    preferenceModal: PreferenceModal;
+    cookieSigningKey?: string;
+    dpdpa?: DpdpaConfig;
+    darkMode?: boolean;
+}
+interface GtmConfig {
+    containerId?: string;
+    events?: string[];
+    dataLayer?: string;
+    urlPassthrough?: boolean;
+    adsDataRedaction?: boolean;
+}
+interface UtilsConfig {
+    gtm?: GtmConfig;
+}
+interface ApiConfig {
+    enabled?: boolean;
+    baseUrl?: string;
+    authToken?: string;
+}
+interface ThemeConfig {
+    bgColor?: string;
+    textColor?: string;
+    primaryColor?: string;
+    primaryTextColor?: string;
+    secondaryColor?: string;
+    secondaryTextColor?: string;
+    borderColor?: string;
+    fontFamily?: string;
+    fontSizeBase?: string;
+    fontSizeHeading?: string;
+    fontSizeMultiplier?: string;
+    borderRadius?: string;
+    buttonBorderRadius?: string;
+    toggleBgOn?: string;
+    toggleBgOff?: string;
+    accentColor?: string;
+    accentTextColor?: string;
+}
+interface CoreConfig {
+    profileId?: number;
+    autoHonorGPC?: boolean | 'strict';
+    locale?: string;
+    disableCssTemplate?: boolean;
+    signCookies?: boolean;
+    cookieSigningKey?: string;
+    allowReceipt?: boolean;
+    cookieDomains?: string;
+    storage?: 'cookie' | 'localStorage';
+    theme?: ThemeConfig;
+    privacyPolicyUrl?: string;
+    regulation?: 'gdpr' | 'ccpa' | 'cpra' | 'dpdpa' | 'uk-gdpr' | 'lgpd' | 'pipeda' | 'popia' | 'pdpa-th' | 'appi' | 'kvkk';
+    userId?: string;
+}
+interface ConsentiConfig {
+    core: CoreConfig;
+    rootEl?: string | HTMLElement;
+    darkMode?: boolean;
+    autoInit?: boolean;
+    api?: ApiConfig;
+    utils?: UtilsConfig;
+    plugins?: ConsentiPlugin[];
+    profileOverride?: Partial<ResolvedProfile>;
+}
+interface ConsentiWidgetAPI {
+    hasConsent(): boolean;
+    getConsent(): ConsentValue | null;
+    getConsentDate(): Date | false;
+    getGTMConsent(): Record<string, string> | null;
+    bannerVisibility(): 'main' | 'gpc' | false;
+    modalVisibility(): 'preference' | false;
+    getProfile(): ResolvedProfile | null;
+    showBanner(gpc?: boolean): void;
+    hideBanner(): void;
+    showModal(triggerEl?: HTMLElement): void;
+    hideModal(): void;
+    submitConsent(consent: Partial<ConsentValue>): Promise<void>;
+    deleteConsent(): Promise<void>;
+    reConsent(): Promise<void>;
+    getRootElement(): HTMLElement | null;
+    getBannerElement(): HTMLElement | null;
+    getModalElement(): HTMLElement | null;
+    switchLocale(locale: string): void;
+    init(): Promise<void>;
+    onReady(callback: () => void): void;
+    destroy(): void;
+}
+declare abstract class ConsentiPlugin {
+    abstract initialize(widget: ConsentiWidgetAPI): void | Promise<void>;
+    abstract destroy(): void;
+    onConsentSubmit?(consent: ConsentValue): void | Promise<void>;
+    onBannerShow?(): void | Promise<void>;
+    onBannerHide?(): void | Promise<void>;
+    onModalShow?(): void | Promise<void>;
+    onModalHide?(): void | Promise<void>;
+}
+
+/**
+ * Main entry point for the Consenti widget.
+ *
+ * Instantiate one `ConsentiSetup` per page (or per profile ID if you run multiple
+ * consent contexts on the same page). The constructor is safe to call during SSR —
+ * it silently no-ops when `window` is not defined.
+ *
+ * @example
+ * ```ts
+ * const widget = new ConsentiSetup({
+ *   core: { profileId: 0 },
+ * })
+ * await widget.ready
+ * console.log(widget.hasConsent())
+ * ```
+ */
+
+declare class ConsentiSetup implements ConsentiWidgetAPI {
+    private config;
+    private initialized;
+    private initializing;
+    private profile;
+    private consentStore;
+    private eventBus;
+    private banner;
+    private modal;
+    private renderer;
+    private broadcastChannel;
+    private readyResolve;
+    private readyPromise;
+    private plugins;
+    /** Signature from the most recent `writeAndSign` call. Included in consent receipts. */
+    private lastSignature;
+    /** Tracks which banner variant is currently visible, or null when hidden. */
+    private _bannerVariant;
+    /**
+     * Creates and initialises the consent widget.
+     *
+     * Construction is synchronous; the async `init()` is launched in the background.
+     * Use `await widget.ready` or `widget.onReady(cb)` to run code after init completes.
+     *
+     * @param config - Widget configuration. See `ConsentiConfig` for all options.
+     */
+    constructor(config: ConsentiConfig);
+    private profileId;
+    /**
+     * Starts widget initialisation. Called automatically unless `autoInit: false` is set.
+     * Can be called explicitly after construction when `autoInit: false`, or after `destroy()`
+     * to re-initialise the same instance.
+     */
+    init(): Promise<void>;
+    /** Applies the `consenti-root--dark` class based on config or profile flag. */
+    private applyDarkMode;
+    /**
+     * Injects CSS custom property overrides supplied via `core.theme` into the
+     * Consenti root element so they cascade down to all widget elements.
+     */
+    private applyTheme;
+    private runPlugins;
+    /**
+     * Invokes an optional plugin hook on all registered plugins.
+     * Async hooks are awaited; errors are caught and logged so a broken plugin
+     * never interferes with the consent flow.
+     *
+     * @param invoke - Function that calls the desired hook method on a single plugin.
+     */
+    private callPluginHook;
+    private buildHandlers;
+    /**
+     * Classifies a consent submission as `accept_all`, `reject_all`, `custom`, or `update`.
+     * Used to enrich events and API payloads with intent metadata.
+     */
+    private deriveAction;
+    private handleBroadcastMessage;
+    /**
+     * Returns `true` if the visitor has saved consent for the active profile.
+     * Always returns `false` during SSR.
+     */
+    hasConsent(): boolean;
+    /**
+     * Returns the stored consent map, or `null` if no consent has been saved.
+     * Always returns `null` during SSR.
+     */
+    getConsent(): ConsentValue | null;
+    /**
+     * Returns the `Date` when consent was last saved, or `false` if no consent exists.
+     * Always returns `false` during SSR.
+     */
+    getConsentDate(): Date | false;
+    /**
+     * Returns the consent map in Google Consent Mode v2 format, ready to pass to
+     * `gtag('consent', 'update', ...)`. Returns `null` if no consent has been saved.
+     *
+     * Maps Consenti cookie IDs to the seven Google Consent Mode v2 parameters.
+     * Cookies whose IDs exactly match a GCM v2 key are forwarded directly.
+     * Non-GCM cookies are ignored by this method (they appear in `getConsent()` only).
+     */
+    getGTMConsent(): Record<string, string> | null;
+    /**
+     * Records and persists the user's consent choices.
+     *
+     * Mandatory cookies are always forced to `'granted'` regardless of what is passed.
+     * Non-mandatory cookies not present in `consent` default to `'denied'`.
+     *
+     * @param consent    - Partial or full map of cookie ID → status.
+     * @param gpcDerived - Internal flag set to `true` when called from the GPC strict path.
+     */
+    submitConsent(consent: Partial<ConsentValue>, gpcDerived?: boolean): Promise<void>;
+    /**
+     * Returns the currently visible banner variant, or `false` if no banner is shown.
+     * Useful for programmatically checking state before calling `showBanner` / `hideBanner`.
+     */
+    bannerVisibility(): 'main' | 'gpc' | false;
+    /**
+     * Returns `'preference'` when the preference modal is open, or `false` when closed.
+     */
+    modalVisibility(): 'preference' | false;
+    /**
+     * Mounts and shows the consent banner.
+     *
+     * No-ops if the requested variant is already visible. If a different variant is
+     * currently shown (e.g. switching from main to GPC), the existing banner is replaced.
+     *
+     * @param useGpcVariant - When `true` and the profile has a `gpcBanner`, that variant
+     *                        is shown instead of `mainBanner`. Used by the GPC flow.
+     */
+    showBanner(useGpcVariant?: boolean): void;
+    /** Hides the banner and notifies other tabs via BroadcastChannel. No-op if already hidden. */
+    hideBanner(): void;
+    /**
+     * Opens the preference modal and hides the banner while the modal is open.
+     * No-ops if the modal is already open.
+     * If the modal is closed without saving consent, the banner is re-shown automatically
+     * (see `hideModal()`). Only one banner or modal is visible at a time.
+     *
+     * @param triggerEl - The element that triggered the modal open. Focus returns here on close.
+     */
+    showModal(triggerEl?: HTMLElement): void;
+    /**
+     * Closes the preference modal and returns focus to the element that opened it.
+     * No-ops if the modal is already closed.
+     * If the user has not yet given consent, the banner is re-shown automatically.
+     */
+    hideModal(): void;
+    /**
+     * Registers a callback to run once the widget has finished initialising.
+     * If the widget is already initialised, the callback is invoked synchronously.
+     *
+     * @param callback - Function to call when the widget is ready.
+     */
+    onReady(callback: () => void): void;
+    /**
+     * A `Promise` that resolves once the widget has finished initialising.
+     * Equivalent to wrapping `onReady()` in a `Promise`.
+     *
+     * @example
+     * ```ts
+     * await widget.ready
+     * console.log('Widget ready')
+     * ```
+     */
+    get ready(): Promise<void>;
+    /**
+     * Deletes the stored consent record and notifies other tabs.
+     * The banner will reappear on the next page load (or immediately if the
+     * receiving tab calls `showBanner()` in response to `consentDeleted`).
+     */
+    deleteConsent(): Promise<void>;
+    /**
+     * Removes existing consent and immediately re-shows the consent banner so the user
+     * can review and update their preferences.
+     *
+     * Equivalent to calling `deleteConsent()` followed by `showBanner()`, but in a single
+     * method so callers do not need to coordinate the async deletion with the banner display.
+     *
+     * Use this to power "Review my consent" links in footers or privacy dashboards.
+     */
+    reConsent(): Promise<void>;
+    /**
+     * Returns the fully resolved profile for the current session, or `null` during the
+     * async init phase (before the profile has been fetched/resolved).
+     *
+     * Plugins can use this to read cookie definitions, banner config, modal categories,
+     * and the profile version without accessing internal state.
+     */
+    getProfile(): ResolvedProfile | null;
+    /**
+     * Returns the `#consenti-root` container element that wraps all widget DOM,
+     * or `null` before the widget has mounted or after `destroy()`.
+     *
+     * Plugins can use this to append custom elements, apply extra CSS variables,
+     * or observe mutations within the widget container.
+     */
+    getRootElement(): HTMLElement | null;
+    /**
+     * Returns the `#consenti-banner` element when it is present in the DOM, or `null`.
+     * The element may be hidden (`display: none`) — check `bannerVisibility()` for visibility state.
+     *
+     * Useful for adding extra content, custom event listeners, or mutation observers on the banner.
+     */
+    getBannerElement(): HTMLElement | null;
+    /**
+     * Returns the `#consenti-modal` element when the modal has been built, or `null`.
+     * The element is built on first `showModal()` call and reused on subsequent opens.
+     *
+     * Useful for injecting extra content into the modal or listening to modal-specific events.
+     */
+    getModalElement(): HTMLElement | null;
+    /**
+     * Switches the active locale, re-resolves the profile, and re-renders the widget.
+     * Called by the locale switcher UI when the user selects a different language.
+     *
+     * @param locale - BCP 47 locale code to switch to (e.g. `'fr'`, `'de-AT'`).
+     */
+    switchLocale(locale: string): void;
+    /**
+     * Destroys the widget — removes all DOM elements, disconnects the BroadcastChannel,
+     * and calls `destroy()` on all registered plugins.
+     *
+     * After `destroy()`, the instance should not be used again.
+     */
+    destroy(): void;
+}
+
+/**
+ * React integration for `@consenti/ui`.
+ *
+ * Import from the `@consenti/ui/react` subpath to keep this module
+ * tree-shaken out of vanilla JS or Vue bundles.
+ *
+ * Intended for **Next.js** (App Router and Pages Router) and any other React 18+
+ * project where you manage the `ConsentiSetup` instance yourself and want the
+ * `useConsent()` hook to re-render when consent changes.
+ *
+ * @example
+ * ```tsx
+ * // app/providers.tsx (Next.js App Router)
+ * 'use client'
+ * import { useEffect } from 'react'
+ * import { ConsentiSetup } from '@consenti/ui'
+ * import { setConsentiWidget } from '@consenti/ui/react'
+ *
+ * export function ConsentiProvider({ children }: { children: React.ReactNode }) {
+ *   useEffect(() => {
+ *     const widget = new ConsentiSetup({ core: { profileId: 0 } })
+ *     setConsentiWidget(widget)
+ *   }, [])
+ *   return <>{children}</>
+ * }
+ *
+ * // Any component
+ * import { useConsent } from '@consenti/ui/react'
+ *
+ * function CookieBanner() {
+ *   const { hasConsent, submitConsent } = useConsent()
+ *   if (hasConsent()) return null
+ *   return <button onClick={() => submitConsent({ analytics: 'granted' })}>Accept</button>
+ * }
+ * ```
+ */
+
+/**
+ * Registers the active `ConsentiSetup` instance so `useConsent()` can read from it.
+ * Call this once after creating your widget, typically inside a `useEffect`.
+ *
+ * @param widget - The `ConsentiSetup` instance to register.
+ */
+declare function setConsentiWidget(widget: ConsentiSetup): void;
+/**
+ * React hook that exposes consent state and lets components react to consent changes.
+ *
+ * Subscribes to `consenti:consentSubmitted` on `window` and triggers a re-render
+ * each time consent is updated. Returns SSR-safe fallback values during server render.
+ *
+ * @returns An object with `hasConsent`, `getConsent`, `submitConsent`, and `getConsentDate`.
+ */
+declare function useConsent(): {
+    hasConsent: () => boolean;
+    getConsent: () => ConsentValue | null;
+    submitConsent: (_consent: Partial<ConsentValue>) => Promise<void>;
+    getConsentDate: () => Date | false;
+};
+
+export { setConsentiWidget, useConsent };

package/dist/react.js

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.ts
+var react_exports = {};
+__export(react_exports, {
+  setConsentiWidget: () => setConsentiWidget,
+  useConsent: () => useConsent
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
+var _widget = null;
+function setConsentiWidget(widget) {
+  _widget = widget;
+}
+function useConsent() {
+  const isServer = typeof window === "undefined";
+  const [, forceUpdate] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (!_widget) return;
+    const handler = () => forceUpdate((n) => n + 1);
+    window.addEventListener("consenti:consentSubmitted", handler);
+    return () => window.removeEventListener("consenti:consentSubmitted", handler);
+  }, []);
+  if (isServer) {
+    return {
+      hasConsent: () => false,
+      getConsent: () => null,
+      submitConsent: async (_consent) => {
+      },
+      getConsentDate: () => false
+    };
+  }
+  return {
+    /** Returns `true` if the visitor has saved consent. */
+    hasConsent: () => _widget?.hasConsent() ?? false,
+    /** Returns the stored consent map, or `null`. */
+    getConsent: () => _widget?.getConsent() ?? null,
+    /** Saves the given partial consent map. Missing keys default to `'denied'`. */
+    submitConsent: (consent) => _widget?.submitConsent(consent) ?? Promise.resolve(),
+    /** Returns the `Date` of last consent submission, or `false`. */
+    getConsentDate: () => _widget?.getConsentDate() ?? false
+  };
+}
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react.ts"],"sourcesContent":["/**\n * React integration for `@consenti/ui`.\n *\n * Import from the `@consenti/ui/react` subpath to keep this module\n * tree-shaken out of vanilla JS or Vue bundles.\n *\n * Intended for **Next.js** (App Router and Pages Router) and any other React 18+\n * project where you manage the `ConsentiSetup` instance yourself and want the\n * `useConsent()` hook to re-render when consent changes.\n *\n * @example\n * ```tsx\n * // app/providers.tsx (Next.js App Router)\n * 'use client'\n * import { useEffect } from 'react'\n * import { ConsentiSetup } from '@consenti/ui'\n * import { setConsentiWidget } from '@consenti/ui/react'\n *\n * export function ConsentiProvider({ children }: { children: React.ReactNode }) {\n *   useEffect(() => {\n *     const widget = new ConsentiSetup({ core: { profileId: 0 } })\n *     setConsentiWidget(widget)\n *   }, [])\n *   return <>{children}</>\n * }\n *\n * // Any component\n * import { useConsent } from '@consenti/ui/react'\n *\n * function CookieBanner() {\n *   const { hasConsent, submitConsent } = useConsent()\n *   if (hasConsent()) return null\n *   return <button onClick={() => submitConsent({ analytics: 'granted' })}>Accept</button>\n * }\n * ```\n */\n\nimport { useState, useEffect } from 'react'\nimport type { ConsentValue } from './types'\nimport type { ConsentiSetup } from './core/consenti-setup'\n\n/**\n * Module-level singleton — the active `ConsentiSetup` instance.\n * Using a module-level variable (rather than React context) keeps the integration\n * zero-configuration: no `<ConsentiProvider>` wrapper is required.\n */\nlet _widget: ConsentiSetup | null = null\n\n/**\n * Registers the active `ConsentiSetup` instance so `useConsent()` can read from it.\n * Call this once after creating your widget, typically inside a `useEffect`.\n *\n * @param widget - The `ConsentiSetup` instance to register.\n */\nexport function setConsentiWidget(widget: ConsentiSetup): void {\n  _widget = widget\n}\n\n/**\n * React hook that exposes consent state and lets components react to consent changes.\n *\n * Subscribes to `consenti:consentSubmitted` on `window` and triggers a re-render\n * each time consent is updated. Returns SSR-safe fallback values during server render.\n *\n * @returns An object with `hasConsent`, `getConsent`, `submitConsent`, and `getConsentDate`.\n */\nexport function useConsent() {\n  const isServer = typeof window === 'undefined'\n\n  const [, forceUpdate] = useState(0)\n\n  useEffect(() => {\n    if (!_widget) return\n    const handler = () => forceUpdate((n) => n + 1)\n    window.addEventListener('consenti:consentSubmitted', handler)\n    return () => window.removeEventListener('consenti:consentSubmitted', handler)\n  }, [])\n\n  if (isServer) {\n    return {\n      hasConsent: () => false as boolean,\n      getConsent: () => null as ConsentValue | null,\n      submitConsent: async (_consent: Partial<ConsentValue>) => {},\n      getConsentDate: () => false as Date | false,\n    }\n  }\n\n  return {\n    /** Returns `true` if the visitor has saved consent. */\n    hasConsent: () => _widget?.hasConsent() ?? false,\n    /** Returns the stored consent map, or `null`. */\n    getConsent: () => _widget?.getConsent() ?? null,\n    /** Saves the given partial consent map. Missing keys default to `'denied'`. */\n    submitConsent: (consent: Partial<ConsentValue>) =>\n      _widget?.submitConsent(consent) ?? Promise.resolve(),\n    /** Returns the `Date` of last consent submission, or `false`. */\n    getConsentDate: () => _widget?.getConsentDate() ?? false,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCA,mBAAoC;AASpC,IAAI,UAAgC;AAQ7B,SAAS,kBAAkB,QAA6B;AAC7D,YAAU;AACZ;AAUO,SAAS,aAAa;AAC3B,QAAM,WAAW,OAAO,WAAW;AAEnC,QAAM,CAAC,EAAE,WAAW,QAAI,uBAAS,CAAC;AAElC,8BAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,UAAU,MAAM,YAAY,CAAC,MAAM,IAAI,CAAC;AAC9C,WAAO,iBAAiB,6BAA6B,OAAO;AAC5D,WAAO,MAAM,OAAO,oBAAoB,6BAA6B,OAAO;AAAA,EAC9E,GAAG,CAAC,CAAC;AAEL,MAAI,UAAU;AACZ,WAAO;AAAA,MACL,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,eAAe,OAAO,aAAoC;AAAA,MAAC;AAAA,MAC3D,gBAAgB,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA;AAAA,IAEL,YAAY,MAAM,SAAS,WAAW,KAAK;AAAA;AAAA,IAE3C,YAAY,MAAM,SAAS,WAAW,KAAK;AAAA;AAAA,IAE3C,eAAe,CAAC,YACd,SAAS,cAAc,OAAO,KAAK,QAAQ,QAAQ;AAAA;AAAA,IAErD,gBAAgB,MAAM,SAAS,eAAe,KAAK;AAAA,EACrD;AACF;","names":[]}

package/dist/react.mjs

@@ -0,0 +1,40 @@
+// src/react.ts
+import { useState, useEffect } from "react";
+var _widget = null;
+function setConsentiWidget(widget) {
+  _widget = widget;
+}
+function useConsent() {
+  const isServer = typeof window === "undefined";
+  const [, forceUpdate] = useState(0);
+  useEffect(() => {
+    if (!_widget) return;
+    const handler = () => forceUpdate((n) => n + 1);
+    window.addEventListener("consenti:consentSubmitted", handler);
+    return () => window.removeEventListener("consenti:consentSubmitted", handler);
+  }, []);
+  if (isServer) {
+    return {
+      hasConsent: () => false,
+      getConsent: () => null,
+      submitConsent: async (_consent) => {
+      },
+      getConsentDate: () => false
+    };
+  }
+  return {
+    /** Returns `true` if the visitor has saved consent. */
+    hasConsent: () => _widget?.hasConsent() ?? false,
+    /** Returns the stored consent map, or `null`. */
+    getConsent: () => _widget?.getConsent() ?? null,
+    /** Saves the given partial consent map. Missing keys default to `'denied'`. */
+    submitConsent: (consent) => _widget?.submitConsent(consent) ?? Promise.resolve(),
+    /** Returns the `Date` of last consent submission, or `false`. */
+    getConsentDate: () => _widget?.getConsentDate() ?? false
+  };
+}
+export {
+  setConsentiWidget,
+  useConsent
+};
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react.ts"],"sourcesContent":["/**\n * React integration for `@consenti/ui`.\n *\n * Import from the `@consenti/ui/react` subpath to keep this module\n * tree-shaken out of vanilla JS or Vue bundles.\n *\n * Intended for **Next.js** (App Router and Pages Router) and any other React 18+\n * project where you manage the `ConsentiSetup` instance yourself and want the\n * `useConsent()` hook to re-render when consent changes.\n *\n * @example\n * ```tsx\n * // app/providers.tsx (Next.js App Router)\n * 'use client'\n * import { useEffect } from 'react'\n * import { ConsentiSetup } from '@consenti/ui'\n * import { setConsentiWidget } from '@consenti/ui/react'\n *\n * export function ConsentiProvider({ children }: { children: React.ReactNode }) {\n *   useEffect(() => {\n *     const widget = new ConsentiSetup({ core: { profileId: 0 } })\n *     setConsentiWidget(widget)\n *   }, [])\n *   return <>{children}</>\n * }\n *\n * // Any component\n * import { useConsent } from '@consenti/ui/react'\n *\n * function CookieBanner() {\n *   const { hasConsent, submitConsent } = useConsent()\n *   if (hasConsent()) return null\n *   return <button onClick={() => submitConsent({ analytics: 'granted' })}>Accept</button>\n * }\n * ```\n */\n\nimport { useState, useEffect } from 'react'\nimport type { ConsentValue } from './types'\nimport type { ConsentiSetup } from './core/consenti-setup'\n\n/**\n * Module-level singleton — the active `ConsentiSetup` instance.\n * Using a module-level variable (rather than React context) keeps the integration\n * zero-configuration: no `<ConsentiProvider>` wrapper is required.\n */\nlet _widget: ConsentiSetup | null = null\n\n/**\n * Registers the active `ConsentiSetup` instance so `useConsent()` can read from it.\n * Call this once after creating your widget, typically inside a `useEffect`.\n *\n * @param widget - The `ConsentiSetup` instance to register.\n */\nexport function setConsentiWidget(widget: ConsentiSetup): void {\n  _widget = widget\n}\n\n/**\n * React hook that exposes consent state and lets components react to consent changes.\n *\n * Subscribes to `consenti:consentSubmitted` on `window` and triggers a re-render\n * each time consent is updated. Returns SSR-safe fallback values during server render.\n *\n * @returns An object with `hasConsent`, `getConsent`, `submitConsent`, and `getConsentDate`.\n */\nexport function useConsent() {\n  const isServer = typeof window === 'undefined'\n\n  const [, forceUpdate] = useState(0)\n\n  useEffect(() => {\n    if (!_widget) return\n    const handler = () => forceUpdate((n) => n + 1)\n    window.addEventListener('consenti:consentSubmitted', handler)\n    return () => window.removeEventListener('consenti:consentSubmitted', handler)\n  }, [])\n\n  if (isServer) {\n    return {\n      hasConsent: () => false as boolean,\n      getConsent: () => null as ConsentValue | null,\n      submitConsent: async (_consent: Partial<ConsentValue>) => {},\n      getConsentDate: () => false as Date | false,\n    }\n  }\n\n  return {\n    /** Returns `true` if the visitor has saved consent. */\n    hasConsent: () => _widget?.hasConsent() ?? false,\n    /** Returns the stored consent map, or `null`. */\n    getConsent: () => _widget?.getConsent() ?? null,\n    /** Saves the given partial consent map. Missing keys default to `'denied'`. */\n    submitConsent: (consent: Partial<ConsentValue>) =>\n      _widget?.submitConsent(consent) ?? Promise.resolve(),\n    /** Returns the `Date` of last consent submission, or `false`. */\n    getConsentDate: () => _widget?.getConsentDate() ?? false,\n  }\n}\n"],"mappings":";AAqCA,SAAS,UAAU,iBAAiB;AASpC,IAAI,UAAgC;AAQ7B,SAAS,kBAAkB,QAA6B;AAC7D,YAAU;AACZ;AAUO,SAAS,aAAa;AAC3B,QAAM,WAAW,OAAO,WAAW;AAEnC,QAAM,CAAC,EAAE,WAAW,IAAI,SAAS,CAAC;AAElC,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,UAAU,MAAM,YAAY,CAAC,MAAM,IAAI,CAAC;AAC9C,WAAO,iBAAiB,6BAA6B,OAAO;AAC5D,WAAO,MAAM,OAAO,oBAAoB,6BAA6B,OAAO;AAAA,EAC9E,GAAG,CAAC,CAAC;AAEL,MAAI,UAAU;AACZ,WAAO;AAAA,MACL,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,eAAe,OAAO,aAAoC;AAAA,MAAC;AAAA,MAC3D,gBAAgB,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA;AAAA,IAEL,YAAY,MAAM,SAAS,WAAW,KAAK;AAAA;AAAA,IAE3C,YAAY,MAAM,SAAS,WAAW,KAAK;AAAA;AAAA,IAE3C,eAAe,CAAC,YACd,SAAS,cAAc,OAAO,KAAK,QAAQ,QAAQ;AAAA;AAAA,IAErD,gBAAgB,MAAM,SAAS,eAAe,KAAK;AAAA,EACrD;AACF;","names":[]}

package/dist/style.d.ts

@@ -0,0 +1,2 @@
+// CSS side-effect import — no exports
+export {}

package/dist/testing.d.cts

@@ -0,0 +1,109 @@
+type ConsentStatus = 'granted' | 'denied' | 'objected';
+type ConsentValue = Record<string, ConsentStatus>;
+
+/**
+ * Test utilities for `@consenti/ui`.
+ *
+ * Import via the `/testing` subpath export so these helpers are never bundled
+ * into production code:
+ *
+ * ```ts
+ * import {
+ *   createMockConsenti,
+ *   mockConsent,
+ *   simulateConsentSubmitted,
+ * } from '@consenti/ui/testing'
+ * ```
+ *
+ * The helpers work in any JavaScript environment that provides a DOM
+ * (browsers, jsdom, happy-dom). They carry no runtime dependencies and
+ * do not import any Consenti internals — safe to use in unit tests without
+ * initialising the full widget.
+ */
+
+/**
+ * Builds a `ConsentValue` map from explicit grant/deny lists.
+ *
+ * @example
+ * ```ts
+ * const consent = mockConsent(
+ *   ['analytics_storage'],            // granted
+ *   ['ad_storage', 'ad_user_data'],   // denied
+ * )
+ * // → { analytics_storage: 'granted', ad_storage: 'denied', ad_user_data: 'denied' }
+ * ```
+ */
+declare function mockConsent(granted?: string[], denied?: string[]): ConsentValue;
+/**
+ * Returns a `ConsentValue` with every listed cookie set to `'granted'`.
+ * Shorthand for the common "user accepted everything" test scenario.
+ */
+declare function mockAllGranted(cookieIds: string[]): ConsentValue;
+/**
+ * Returns a `ConsentValue` with every listed cookie set to `'denied'`.
+ * Shorthand for the common "user rejected everything" test scenario.
+ */
+declare function mockAllDenied(cookieIds: string[]): ConsentValue;
+/**
+ * Dispatches `consenti:consentSubmitted` on `window` with the supplied consent
+ * map. Use this to trigger code paths that listen to consent changes without
+ * going through the full widget initialisation flow.
+ */
+declare function simulateConsentSubmitted(consent: ConsentValue): void;
+/**
+ * Dispatches `consenti:bannerInitialized` on `window`.
+ * Use this to simulate widget initialisation in tests that gate on the event.
+ */
+declare function simulateBannerInitialized(hasExistingConsent?: boolean): void;
+/**
+ * Dispatches `consenti:consentBeingSubmitted` on `window` before a simulated
+ * consent submission. Use in tests that capture both events.
+ */
+declare function simulateConsentBeingSubmitted(consent: ConsentValue): void;
+/**
+ * Shape returned by {@link createMockConsenti}.
+ * Mirrors the public API of `ConsentiSetup` for use in unit tests.
+ */
+interface MockConsentiSetup {
+    hasConsent: () => boolean;
+    getConsent: () => ConsentValue | null;
+    getConsentDate: () => Date | false;
+    getGTMConsent: () => Record<string, string> | null;
+    submitConsent: (consent: Partial<ConsentValue>) => Promise<void>;
+    deleteConsent: () => Promise<void>;
+    showBanner: (useGpcVariant?: boolean) => void;
+    hideBanner: () => void;
+    showModal: () => void;
+    hideModal: () => void;
+    bannerVisibility: () => 'main' | 'gpc' | false;
+    modalVisibility: () => 'preference' | false;
+    onReady: (cb: () => void) => void;
+    readonly ready: Promise<void>;
+    destroy: () => void;
+    reConsent: () => Promise<void>;
+}
+/**
+ * Creates a minimal in-memory mock of `ConsentiSetup` for use in unit tests.
+ *
+ * All methods are no-ops or return sensible defaults. Pass an initial `consent`
+ * map to simulate a returning visitor who has already given consent.
+ *
+ * The mock's `submitConsent` updates internal state and fires
+ * `simulateConsentSubmitted` so event listeners in the component under test
+ * are triggered exactly as in production.
+ *
+ * @example
+ * ```ts
+ * const widget = createMockConsenti(
+ *   mockConsent(['analytics_storage'], ['ad_storage'])
+ * )
+ * expect(widget.hasConsent()).toBe(true)
+ * expect(widget.getConsent()?.analytics_storage).toBe('granted')
+ *
+ * await widget.submitConsent({ ad_storage: 'granted' })
+ * expect(widget.getConsent()?.ad_storage).toBe('granted')
+ * ```
+ */
+declare function createMockConsenti(consent?: ConsentValue | null): MockConsentiSetup;
+
+export { type MockConsentiSetup, createMockConsenti, mockAllDenied, mockAllGranted, mockConsent, simulateBannerInitialized, simulateConsentBeingSubmitted, simulateConsentSubmitted };