@c15t/react 2.0.0-rc.9 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +3 -3
  2. package/dist/components/consent-banner/consent-banner.cjs +1 -1
  3. package/dist/components/consent-banner/consent-banner.js +1 -1
  4. package/dist/components/consent-dialog/atoms/card.cjs +1 -1
  5. package/dist/components/consent-dialog/atoms/card.js +1 -1
  6. package/dist/components/consent-widget/atoms/root.cjs +1 -1
  7. package/dist/components/consent-widget/atoms/root.js +1 -1
  8. package/dist/components/consent-widget/consent-widget.cjs +1 -1
  9. package/dist/components/consent-widget/consent-widget.js +1 -1
  10. package/dist/components/iab-consent-banner/iab-consent-banner.cjs +1 -1
  11. package/dist/components/iab-consent-banner/iab-consent-banner.js +1 -1
  12. package/dist/components/iab-consent-dialog/iab-consent-dialog.cjs +1 -1
  13. package/dist/components/iab-consent-dialog/iab-consent-dialog.js +1 -1
  14. package/dist/components/shared/ui/branding.cjs +1 -1
  15. package/dist/components/shared/ui/branding.js +1 -1
  16. package/dist/index.cjs +1 -1
  17. package/dist/version.cjs +1 -1
  18. package/dist/version.js +1 -1
  19. package/dist-types/components/consent-dialog/atoms/card.d.ts +1 -0
  20. package/dist-types/components/consent-dialog/index.d.ts +2 -1
  21. package/dist-types/components/consent-widget/atoms/root.d.ts +0 -5
  22. package/dist-types/components/shared/ui/branding.d.ts +5 -1
  23. package/dist-types/types/consent-manager.d.ts +2 -2
  24. package/dist-types/version.d.ts +1 -1
  25. package/docs/building-headless-components.md +118 -16
  26. package/docs/components/consent-banner.md +1 -30
  27. package/docs/components/consent-dialog.md +4 -3
  28. package/docs/components/consent-manager-provider.md +11 -11
  29. package/docs/components/consent-widget.md +1 -28
  30. package/docs/concepts/client-modes.md +1 -1
  31. package/docs/concepts/policy-packs.md +1 -1
  32. package/docs/hooks/use-consent-manager/overview.md +18 -2
  33. package/docs/iab/consent-banner.md +6 -4
  34. package/docs/iab/consent-dialog.md +6 -4
  35. package/docs/iab/overview.md +12 -11
  36. package/docs/iab/use-gvl-data.md +9 -197
  37. package/docs/internationalization.md +1 -1
  38. package/docs/optimization.md +35 -1
  39. package/docs/policy-packs.md +1 -1
  40. package/docs/quickstart.md +11 -8
  41. package/docs/styling/color-scheme.md +1 -1
  42. package/docs/styling/css-variables.md +1 -1
  43. package/docs/styling/overview.md +11 -4
  44. package/docs/styling/slots.md +7 -3
  45. package/docs/styling/tokens.md +3 -1
  46. package/package.json +7 -8
@@ -1,11 +1,15 @@
1
1
  import type { Branding } from 'c15t';
2
2
  import type { SVGProps } from 'react';
3
+ import type { CSSPropertiesWithVars } from '../../../types/theme';
3
4
  export type ResolvedBranding = 'c15t' | 'inth' | 'none';
4
5
  export type BrandingVariant = 'footer' | 'dialog-tag' | 'banner-tag';
6
+ export type BrandingThemeKey = 'consentBannerTag' | 'consentDialogTag' | 'consentWidgetTag' | 'iabConsentBannerTag' | 'iabConsentDialogTag';
5
7
  type BrandingProps = {
6
8
  hideBranding: boolean;
7
9
  variant?: BrandingVariant;
10
+ themeKey?: BrandingThemeKey;
8
11
  className?: string;
12
+ style?: CSSPropertiesWithVars;
9
13
  'data-testid'?: string;
10
14
  };
11
15
  type BrandingFullLogoProps = {
@@ -19,5 +23,5 @@ export declare function resolveBranding(branding: Branding | string): ResolvedBr
19
23
  export declare function getBrandingHref(branding: Branding | string, refParam?: string): string;
20
24
  export declare function BrandingFullLogo({ branding, className, }: BrandingFullLogoProps): import("react/jsx-runtime").JSX.Element;
21
25
  export declare function BrandingCompactLogo({ branding, ...props }: BrandingCompactLogoProps): import("react/jsx-runtime").JSX.Element;
22
- export declare function BrandingLink({ hideBranding, variant, className, 'data-testid': testId, }: BrandingProps): import("react/jsx-runtime").JSX.Element | null;
26
+ export declare function BrandingLink({ hideBranding, variant, themeKey, className, style, 'data-testid': testId, }: BrandingProps): import("react/jsx-runtime").JSX.Element | null;
23
27
  export {};
@@ -16,7 +16,7 @@ export interface ReactUIOptions extends UIOptions {
16
16
  * In offline mode this also includes `offlinePolicy` configuration for
17
17
  * local policy previews.
18
18
  *
19
- * @see {@link https://v2.c15t.com/docs/frameworks/react/policy-packs}
19
+ * @see {@link https://c15t.com/docs/frameworks/react/policy-packs}
20
20
  */
21
21
  export type ConsentManagerOptions = BaseConsentManagerOptions & ReactUIOptions;
22
22
  /**
@@ -33,7 +33,7 @@ export interface ConsentManagerProviderProps {
33
33
  * Configuration options for the consent manager.
34
34
  * This includes core, React, store, and translation settings.
35
35
  *
36
- * @see {@link https://v2.c15t.com/docs/frameworks/react/components/consent-manager-provider}
36
+ * @see {@link https://c15t.com/docs/frameworks/react/components/consent-manager-provider}
37
37
  */
38
38
  options: ConsentManagerOptions;
39
39
  }
@@ -1 +1 @@
1
- export declare const version = "2.0.0-rc.9";
1
+ export declare const version = "2.0.0";
@@ -4,11 +4,11 @@ description: Build policy-aware custom consent components in React using the hea
4
4
  ---
5
5
  Building custom consent UI is easier now because c15t exposes multiple layers of policy-aware primitives instead of forcing you to reconstruct banner rules by hand.
6
6
 
7
- The layering is:
7
+ Think of customization as a ladder:
8
8
 
9
9
  * stock component props for the shortest path
10
- * `ConsentBanner.PolicyActions` and `ConsentWidget.PolicyActions` for custom structure with policy-aware actions
11
- * `useHeadlessConsentUI()` for fully manual action rendering and non-standard controls
10
+ * `ConsentBanner.PolicyActions` and `ConsentWidget.PolicyActions` when you want custom structure but still want c15t to resolve policy-aware actions
11
+ * `useHeadlessConsentUI()` when you need fully manual action rendering, custom controls, or non-standard flow
12
12
 
13
13
  > ⚠️ **Warning:**
14
14
  > Headless is the last step in the customization ladder. Use this guide only when pre-built components, tokens, slots, compound components, and noStyle are no longer sufficient.
@@ -26,6 +26,29 @@ The split is intentional: `@c15t/ui` owns pure policy-action resolution, while t
26
26
  > ℹ️ **Info:**
27
27
  > This guide is about building your own components while still respecting resolved policy-pack behavior. For the general headless overview, see Headless Mode.
28
28
 
29
+ ## Choose the Smallest Layer That Solves the Job
30
+
31
+ Start with the smallest API surface that still gives you the behavior you need:
32
+
33
+ * Stay with stock components when you only need theming, spacing, copy, or legal-link changes
34
+ * Use `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions` when you want a custom compound-component layout but still want grouped actions, ordering, and primary emphasis to come from policy
35
+ * Add `renderAction` when the grouping is still correct but you want to remap actions to stock c15t button compounds
36
+ * Reach for `useHeadlessConsentUI()` only when you need custom button elements, need to map `actionGroups` yourself, wire non-button controls, or coordinate the consent UI with a more custom state machine
37
+
38
+ This order matters because every step down the ladder gives you more control, but also makes it easier for your UI to drift away from the resolved policy if you stop using the provided state.
39
+
40
+ ## Before You Build Headless UI
41
+
42
+ Do not use headless mode for problems that are still inside the stock component model:
43
+
44
+ * Use `layout`, `direction`, `primaryButton`, and `legalLinks` before you rebuild banner markup
45
+ * Use `theme.consentActions` before you swap out stock actions
46
+ * Use tokens such as `colors.surface` and `colors.surfaceHover` before raw CSS overrides
47
+ * Use slots such as `consentBannerCard`, `consentBannerFooter`, and `consentDialogCard` before compound components
48
+ * Use `ConsentManagerProvider.options.i18n` before rebuilding UI just to change text
49
+
50
+ A good rule: if the stock banner or dialog structure is still correct, you probably do not need headless mode.
51
+
29
52
  ## What the Headless Tooling Gives You
30
53
 
31
54
  The main win is that your custom UI can stay aligned with policy packs without duplicating policy logic in your components.
@@ -40,9 +63,63 @@ The main win is that your custom UI can stay aligned with policy packs without d
40
63
  * UI profile and scroll-lock hints
41
64
  * whether the banner or dialog should currently be visible
42
65
 
66
+ The hook also gives you the policy-aware action helpers you are expected to call:
67
+
68
+ * `performBannerAction('accept' | 'reject')`
69
+ * `performDialogAction('accept' | 'reject')`
70
+ * `saveCustomPreferences()` for the dialog `customize` action
71
+ * `openDialog()`, `openBanner()`, and `closeUI()` for surface visibility
72
+
43
73
  That means your component mostly focuses on markup and design-system concerns instead of re-implementing policy interpretation.
44
74
 
45
- For most compound-component layouts, start with `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions`. They render stock c15t buttons and translations by default, and `renderAction` is only needed when you want to override the action mapping. Reach for manual `actionGroups` mapping when you need action rendering that no longer fits the stock button compounds.
75
+ For most compound-component layouts, start with `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions`. They render stock c15t buttons and translations by default, and `renderAction` is only needed when you want to override which stock compound renders for each action. Reach for manual `actionGroups` mapping when you need action rendering that no longer fits the stock button compounds.
76
+
77
+ ## Policy-Aware Compound Components First
78
+
79
+ If your goal is "custom layout, same policy behavior", start here before dropping to manual `actionGroups` rendering:
80
+
81
+ ```tsx
82
+ import { ConsentBanner } from '@c15t/react';
83
+
84
+ export function BannerShell() {
85
+ return (
86
+ <ConsentBanner.Root>
87
+ <ConsentBanner.Card>
88
+ <ConsentBanner.Header>
89
+ <ConsentBanner.Title />
90
+ <ConsentBanner.Description />
91
+ </ConsentBanner.Header>
92
+ <ConsentBanner.PolicyActions />
93
+ </ConsentBanner.Card>
94
+ </ConsentBanner.Root>
95
+ );
96
+ }
97
+ ```
98
+
99
+ Use `renderAction` only when you want to remap actions to stock button compounds while keeping the same policy-driven grouping and ordering:
100
+
101
+ ```tsx
102
+ import { ConsentBanner } from '@c15t/react';
103
+
104
+ export function BannerActionsWithCustomMapping() {
105
+ return (
106
+ <ConsentBanner.PolicyActions
107
+ renderAction={(action, props) => {
108
+ const { key, ...buttonProps } = props;
109
+
110
+ switch (action) {
111
+ case 'accept':
112
+ return <ConsentBanner.AcceptButton key={key} {...buttonProps} />;
113
+ case 'reject':
114
+ return <ConsentBanner.RejectButton key={key} {...buttonProps} />;
115
+ case 'customize':
116
+ return <ConsentBanner.CustomizeButton key={key} {...buttonProps} />;
117
+ }
118
+ }}
119
+ />
120
+ );
121
+ }
122
+ ```
46
123
 
47
124
  > ℹ️ **Info:**
48
125
  > For custom layouts built from c15t compound components, prefer ConsentBanner.PolicyActions and ConsentWidget.PolicyActions. The examples below intentionally use manual actionGroups mapping to show the fully headless escape hatch.
@@ -86,9 +163,20 @@ export function ConsentManager({ children }: { children: ReactNode }) {
86
163
  import { useHeadlessConsentUI, useTranslations } from '@c15t/react/headless';
87
164
 
88
165
  export function CustomConsentBanner() {
89
- const { banner, openDialog, performAction } = useHeadlessConsentUI();
166
+ const { banner, openDialog, performBannerAction } = useHeadlessConsentUI();
90
167
  const translations = useTranslations();
91
168
 
169
+ function getActionLabel(action: (typeof banner.allowedActions)[number]) {
170
+ switch (action) {
171
+ case 'accept':
172
+ return translations.common.acceptAll;
173
+ case 'reject':
174
+ return translations.common.rejectAll;
175
+ case 'customize':
176
+ return translations.common.customize;
177
+ }
178
+ }
179
+
92
180
  if (!banner.isVisible) return null;
93
181
 
94
182
  return (
@@ -111,14 +199,10 @@ export function CustomConsentBanner() {
111
199
  openDialog();
112
200
  return;
113
201
  }
114
- void performAction(action, { surface: 'banner' });
202
+ void performBannerAction(action);
115
203
  }}
116
204
  >
117
- {action === 'accept'
118
- ? translations.common.acceptAll
119
- : action === 'reject'
120
- ? translations.common.rejectAll
121
- : translations.common.customize}
205
+ {getActionLabel(action)}
122
206
  </button>
123
207
  ))}
124
208
  </div>
@@ -149,6 +233,17 @@ export function CustomConsentDialog() {
149
233
  } = useConsentManager();
150
234
  const translations = useTranslations();
151
235
 
236
+ function getActionLabel(action: (typeof dialog.allowedActions)[number]) {
237
+ switch (action) {
238
+ case 'accept':
239
+ return translations.common.acceptAll;
240
+ case 'reject':
241
+ return translations.common.rejectAll;
242
+ case 'customize':
243
+ return translations.common.save;
244
+ }
245
+ }
246
+
152
247
  if (!dialog.isVisible) return null;
153
248
 
154
249
  const displayedTypes = consentTypes.filter(
@@ -197,11 +292,7 @@ export function CustomConsentDialog() {
197
292
  void performDialogAction(action);
198
293
  }}
199
294
  >
200
- {action === 'accept'
201
- ? translations.common.acceptAll
202
- : action === 'reject'
203
- ? translations.common.rejectAll
204
- : translations.common.save}
295
+ {getActionLabel(action)}
205
296
  </button>
206
297
  ))}
207
298
  </div>
@@ -212,6 +303,17 @@ export function CustomConsentDialog() {
212
303
  }
213
304
  ```
214
305
 
306
+ ## What Headless Is Not For
307
+
308
+ Headless mode is not the recommended path for:
309
+
310
+ * changing the banner footer background
311
+ * rounding the stock banner card
312
+ * restyling stock banner or dialog buttons
313
+ * changing consent copy
314
+
315
+ Those should stay in the pre-built stack with tokens, slots, `theme.consentActions`, and provider `i18n`.
316
+
215
317
  ## What a Policy-Aware Headless Component Should Respect
216
318
 
217
319
  When you build custom banner or dialog components, make sure they use:
@@ -241,36 +241,7 @@ renderAction={(action, props) => {
241
241
  />
242
242
  ```
243
243
 
244
- Use `useTranslations()` only when you are replacing the button markup entirely:
245
-
246
- ```tsx
247
- import { ConsentBanner, useTranslations } from '@c15t/react';
248
-
249
- export function CustomBannerActions() {
250
- const { common } = useTranslations();
251
-
252
- return (
253
- <ConsentBanner.PolicyActions
254
- renderAction={(action, props) => (
255
- <button
256
- key={props.key}
257
- type="button"
258
- className={props.isPrimary ? 'btn-primary' : 'btn-secondary'}
259
- style={props.style}
260
- >
261
- {action === 'accept'
262
- ? common.acceptAll
263
- : action === 'reject'
264
- ? common.rejectAll
265
- : common.customize}
266
- </button>
267
- )}
268
- />
269
- );
270
- }
271
- ```
272
-
273
- For maximum control, use `useHeadlessConsentUI()` and render `banner.actionGroups` manually.
244
+ `renderAction` is still meant for stock button compounds. If you want completely custom button elements and click handling, use `useHeadlessConsentUI()` and render `banner.actionGroups` manually instead of `ConsentBanner.PolicyActions`.
274
245
 
275
246
  If you only need styling changes, stay with tokens and slots instead of rebuilding the banner layout.
276
247
 
@@ -75,7 +75,7 @@ Add a floating button that lets users re-open the dialog after dismissing the ba
75
75
 
76
76
  ## Branding
77
77
 
78
- Hide the c15t branding in the dialog footer:
78
+ Hide the c15t branding tag:
79
79
 
80
80
  ```tsx
81
81
  <ConsentDialog hideBranding />
@@ -84,7 +84,7 @@ Hide the c15t branding in the dialog footer:
84
84
  ## Styling First
85
85
 
86
86
  > ℹ️ **Info:**
87
- > If you are only changing visuals, stay with the stock dialog and use the theme system first. Start with tokens and slots such as consentDialogCard, consentDialogHeader, and consentDialogFooter. See Styling Overview.
87
+ > If you are only changing visuals, stay with the stock dialog and use the theme system first. Start with tokens and slots such as consentDialogCard, consentWidgetFooter, and consentDialogTag. See Styling Overview.
88
88
 
89
89
  ```tsx
90
90
  <ConsentManagerProvider
@@ -97,7 +97,8 @@ Hide the c15t branding in the dialog footer:
97
97
  slots: {
98
98
  consentDialogCard: 'rounded-[32px] shadow-xl',
99
99
  consentDialogHeader: 'gap-3',
100
- consentDialogFooter: 'border-t border-black/10 px-6',
100
+ consentWidgetFooter: 'gap-3 pt-6',
101
+ consentDialogTag: 'shadow-none',
101
102
  },
102
103
  },
103
104
  }}
@@ -36,15 +36,15 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
36
36
  |Property|Type|Description|Default|Required|
37
37
  |:--|:--|:--|:--|:--:|
38
38
  |enabled|boolean \|undefined|Whether c15t should be active.|true|Optional|
39
- |callbacks|[Callbacks \|undefined](https://v2.c15t.com/docs/frameworks/react/callbacks)|Event callbacks for consent actions.|-|Optional|
40
- |scripts|[Script \|undefined](https://v2.c15t.com/docs/frameworks/react/script-loader)|Dynamically load scripts based on consent state.|-|Optional|
39
+ |callbacks|[Callbacks \|undefined](https://c15t.com/docs/frameworks/react/callbacks)|Event callbacks for consent actions.|-|Optional|
40
+ |scripts|[Script \|undefined](https://c15t.com/docs/frameworks/react/script-loader)|Dynamically load scripts based on consent state.|-|Optional|
41
41
  |legalLinks|Object \|undefined|Configuration for the legal links.|-|Optional|
42
42
  |storageConfig|StorageConfig \|undefined|Storage configuration for consent persistence.|-|Optional|
43
43
  |user|User \|undefined|The user's information. Usually your own internal ID for the user from your auth provider.|-|Optional|
44
44
  |overrides|Overrides \|undefined|Forcefully set values like country, region, language for the consent manager. These values will override the values detected from the browser.|-|Optional|
45
- |networkBlocker|[NetworkBlockerConfig \|undefined](https://v2.c15t.com/docs/frameworks/react/network-blocker)|Configuration for the network request blocker.|-|Optional|
46
- |iab|[IABConfig \|undefined](https://v2.c15t.com/docs/frameworks/react/iab/overview)|IAB TCF 2.3 configuration.|-|Optional|
47
- |ssrData|[Object \|undefined](https://v2.c15t.com/docs/frameworks/react/server-side)|SSR-prefetched data for hydration.|-|Optional|
45
+ |networkBlocker|[NetworkBlockerConfig \|undefined](https://c15t.com/docs/frameworks/react/network-blocker)|Configuration for the network request blocker.|-|Optional|
46
+ |iab|[IABConfig \|undefined](https://c15t.com/docs/frameworks/react/iab/overview)|IAB TCF 2.3 configuration.|-|Optional|
47
+ |ssrData|[Object \|undefined](https://c15t.com/docs/frameworks/react/server-side)|SSR-prefetched data for hydration.|-|Optional|
48
48
 
49
49
  #### `callbacks` Callbacks
50
50
 
@@ -171,8 +171,8 @@ SSR-prefetched data for hydration.
171
171
  |Property|Type|Description|Default|Required|
172
172
  |:--|:--|:--|:--|:--:|
173
173
  |i18n|I18nConfig \|undefined|Preferred i18n configuration in c15t v2.|-|Optional|
174
- |translations|[TranslationConfig \|undefined](https://v2.c15t.com/docs/frameworks/react/internationalization)|Translation configuration to seed the store with.|-|Optional|
175
- |consentCategories|[AllConsentNames \|undefined](https://v2.c15t.com/docs/frameworks/react/concepts/consent-categories)|Consent categories to show in the consent banner.|-|Optional|
174
+ |translations|[TranslationConfig \|undefined](https://c15t.com/docs/frameworks/react/internationalization)|Translation configuration to seed the store with.|-|Optional|
175
+ |consentCategories|[AllConsentNames \|undefined](https://c15t.com/docs/frameworks/react/concepts/consent-categories)|Consent categories to show in the consent banner.|-|Optional|
176
176
 
177
177
  #### `i18n` I18nConfig
178
178
 
@@ -198,12 +198,12 @@ Translation configuration to seed the store with.
198
198
 
199
199
  |Property|Type|Description|Default|Required|
200
200
  |:--|:--|:--|:--|:--:|
201
- |theme|[Theme \|undefined](https://v2.c15t.com/docs/frameworks/react/styling/tokens)|Visual theme to apply.|-|Optional|
201
+ |theme|[Theme \|undefined](https://c15t.com/docs/frameworks/react/styling/tokens)|Visual theme to apply.|-|Optional|
202
202
  |disableAnimation|boolean \|undefined|Whether to disable animations.|false|Optional|
203
203
  |scrollLock|boolean \|undefined|Whether to lock scroll when dialogs are open.|false|Optional|
204
204
  |trapFocus|boolean \|undefined|Whether to trap focus within dialogs.|true|Optional|
205
- |colorScheme|["light" \|"dark" \|"system" \|undefined](https://v2.c15t.com/docs/frameworks/react/styling/color-scheme)|Color scheme preference. With this option, you can force the theme to be light, dark or system. Otherwise, the theme will be detected if you have '.dark' classname in your document.|-|Optional|
206
- |noStyle|[boolean \|undefined](https://v2.c15t.com/docs/frameworks/react/headless)|Whether to disable default styles.|false|Optional|
205
+ |colorScheme|["light" \|"dark" \|"system" \|undefined](https://c15t.com/docs/frameworks/react/styling/color-scheme)|Color scheme preference. With this option, you can force the theme to be light, dark or system. Otherwise, the theme will be detected if you have '.dark' classname in your document.|-|Optional|
206
+ |noStyle|[boolean \|undefined](https://c15t.com/docs/frameworks/react/headless)|Whether to disable default styles.|false|Optional|
207
207
 
208
208
  #### `theme` Theme
209
209
 
@@ -392,7 +392,7 @@ Read the full guide at [Policy Packs](/docs/frameworks/react/policy-packs) and t
392
392
  |Property|Type|Description|Default|Required|
393
393
  |:--|:--|:--|:--|:--:|
394
394
  |children|ReactNode|React children to render within the provider.|-|✅ Required|
395
- |options|[ConsentManagerOptions](https://v2.c15t.com/docs/frameworks/react/components/consent-manager-provider)|Configuration options for the consent manager. This includes core, React, store, and translation settings.|-|✅ Required|
395
+ |options|[ConsentManagerOptions](https://c15t.com/docs/frameworks/react/components/consent-manager-provider)|Configuration options for the consent manager. This includes core, React, store, and translation settings.|-|✅ Required|
396
396
 
397
397
  #### `options` ConsentManagerOptions
398
398
 
@@ -117,34 +117,7 @@ renderAction={(action, props) => {
117
117
  />
118
118
  ```
119
119
 
120
- Use `useTranslations()` only when you are replacing the button markup entirely:
121
-
122
- ```tsx
123
- import { ConsentWidget, useTranslations } from '@c15t/react';
124
-
125
- export function CustomWidgetActions() {
126
- const { common } = useTranslations();
127
-
128
- return (
129
- <ConsentWidget.PolicyActions
130
- renderAction={(action, props) => (
131
- <button
132
- key={props.key}
133
- type="button"
134
- className={props.isPrimary ? 'btn-primary' : 'btn-secondary'}
135
- style={props.style}
136
- >
137
- {action === 'accept'
138
- ? common.acceptAll
139
- : action === 'reject'
140
- ? common.rejectAll
141
- : common.save}
142
- </button>
143
- )}
144
- />
145
- );
146
- }
147
- ```
120
+ `renderAction` is still meant for stock button compounds. If you want completely custom button elements and handlers, use `useHeadlessConsentUI()` and render `dialog.actionGroups` manually instead of `ConsentWidget.PolicyActions`.
148
121
 
149
122
  For a fixed footer layout, render `ConsentWidget.Footer` and `ConsentWidget.FooterSubGroup` manually instead of using `ConsentWidget.PolicyActions`.
150
123
 
@@ -15,7 +15,7 @@ c15t supports three client modes that determine how consent data is stored and s
15
15
 
16
16
  ## Hosted Mode (Recommended)
17
17
 
18
- The default mode. Connects to a c15t backend for full consent lifecycle management. We recommend using [consent.io](https://consent.io) for a fully managed experience, but you can [self-host](/docs/self-host) as well.
18
+ The default mode. Connects to a c15t backend for full consent lifecycle management. We recommend using [inth.com](https://inth.com) for a fully managed experience, but you can [self-host](/docs/self-host) as well.
19
19
 
20
20
  > ℹ️ **Info:**
21
21
  > mode: 'hosted' is the preferred value. The legacy alias mode: 'c15t' is still supported for backward compatibility.
@@ -8,7 +8,7 @@ A policy pack is an ordered array of policies. Each policy targets a region or c
8
8
 
9
9
  There are three ways to configure policy packs:
10
10
 
11
- 1. **consent.io (recommended)** — use [consent.io](https://consent.io) as your hosted backend. Configure packs visually in the dashboard or via API — no code changes required. Works with any frontend, including static sites.
11
+ 1. **inth.com (recommended)** — use [inth.com](https://inth.com) as your hosted backend. Configure packs visually in the dashboard or via API — no code changes required. Works with any frontend, including static sites.
12
12
  2. **Self-hosted backend** — define packs in code via `policyPacks` and resolve them from real request geo data. Full control over policy logic and storage.
13
13
  3. **Offline fallback** — pass the same policy shapes to the frontend via `offlinePolicy.policyPacks`. Use this mainly for local development, demos, deterministic testing, or resilience when the backend is temporarily unreachable. If you omit `offlinePolicy.policyPacks`, c15t falls back to a synthetic worldwide opt-in banner instead of no-banner mode.
14
14
 
@@ -87,7 +87,7 @@ Information about when and how consent was given
87
87
  |:--|:--|:--|:--|:--:|
88
88
  |time|number|The epoch timestamp of when the consent was recorded|-|✅ Required|
89
89
  |subjectId|string \|undefined|The client-generated subject ID in sub\_xxx format|-|Optional|
90
- |id|string \|undefined|Configuration for the legal links @remarks Legal links can display across different parts of the consent manager such as the consent banner & dialog.|-|Optional|
90
+ |id|string \|undefined|Effective GPC signal used for the request.|-|Optional|
91
91
  |externalId|string \|undefined|The external user ID linked to this subject|-|Optional|
92
92
  |materialPolicyFingerprint|string \|undefined|Material fingerprint of the active policy when this consent was accepted.|-|Optional|
93
93
  |identityProvider|string \|undefined|The identity provider that provided the external ID|-|Optional|
@@ -189,6 +189,7 @@ IAB TCF 2.3 state and actions (null when not configured or not in IAB mode).
189
189
  |setOverrides|Object \|undefined \|null|Sets the overrides for the consent manager. Automatically attempts to fetch the consent manager again with the new overrides.|-|✅ Required|
190
190
  |setLanguage|Object \|undefined \|null|Set the language override for the consent manager. This will override the language detected from the browser and re-fetch the consent banner information.|-|✅ Required|
191
191
  |identifyUser|Object|Identifies the user by setting the external ID.|-|✅ Required|
192
+ |unstable\_acceptPolicyConsent|Object \|undefined|Writes a policy-based consent such as terms and conditions.|-|✅ Required|
192
193
  |setSelectedConsent|(name: AllConsentNames, value: boolean) => void|Updates the selected consent state for a specific consent type.|-|✅ Required|
193
194
  |saveConsents|Object \|undefined|Saves the user's consent preferences.|-|✅ Required|
194
195
  |setConsent|(name: AllConsentNames, value: boolean) => void|Updates the consent state for a specific consent type & automatically save the consent.|-|✅ Required|
@@ -246,6 +247,21 @@ Identifies the user by setting the external ID.
246
247
  |id|string|Usually your own internal ID for the user from your auth provider|-|✅ Required|
247
248
  |identityProvider|string \|undefined|The identity provider of the user. Usually the name of the identity provider e.g. 'clerk', 'auth0', 'custom', etc.|-|Optional|
248
249
 
250
+ #### `unstable_acceptPolicyConsent`
251
+
252
+ Writes a policy-based consent such as terms and conditions.
253
+
254
+ |Property|Type|Description|Default|Required|
255
+ |:--|:--|:--|:--|:--:|
256
+ |type|Object|-|-|✅ Required|
257
+ |domain|string \|undefined|-|-|Optional|
258
+ |givenAt|number \|undefined|-|-|Optional|
259
+ |metadata|Record\<string, unknown> \|undefined|-|-|Optional|
260
+ |preferences|Record\<string, boolean> \|undefined|-|-|Optional|
261
+ |uiSource|string \|undefined|-|-|Optional|
262
+ |externalId|string \|undefined|-|-|Optional|
263
+ |identityProvider|string \|undefined|-|-|Optional|
264
+
249
265
  #### `subscribeToConsentChanges`
250
266
 
251
267
  Subscribes to change-only consent saves.
@@ -344,7 +360,7 @@ function LoginForm() {
344
360
  ```
345
361
 
346
362
  > ℹ️ **Info:**
347
- > identifyUser sends the user data to the c15t backend. It only works in 'c15t' mode — in 'offline' mode the call is a no-op.
363
+ > identifyUser sends the user data to the c15t backend. It works in hosted mode, including the legacy alias mode: 'c15t'. In mode: 'offline', the call is a no-op.
348
364
 
349
365
  ## Key Types
350
366
 
@@ -19,6 +19,7 @@ Use this component instead of `ConsentBanner` when you need IAB TCF compliance f
19
19
 
20
20
  ```tsx
21
21
  import { type ReactNode } from 'react';
22
+ import { iab } from '@c15t/iab';
22
23
  import { ConsentManagerProvider } from '@c15t/react';
23
24
  import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';
24
25
 
@@ -28,11 +29,12 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
28
29
  options={{
29
30
  mode: 'hosted',
30
31
  backendURL: 'https://your-instance.c15t.dev',
31
- iab: {
32
- enabled: true,
33
- cmpId: 123,
32
+ iab: iab({
34
33
  vendors: [1, 2, 10, 25],
35
- },
34
+ // cmpId is automatically provided by the backend when using consent.io.
35
+ // Only set this if you have your own CMP registration.
36
+ // cmpId: 123,
37
+ }),
36
38
  }}
37
39
  >
38
40
  <IABConsentBanner />
@@ -13,6 +13,7 @@ Pair it with `IABConsentBanner` inside the provider:
13
13
 
14
14
  ```tsx
15
15
  import { type ReactNode } from 'react';
16
+ import { iab } from '@c15t/iab';
16
17
  import { ConsentManagerProvider } from '@c15t/react';
17
18
  import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';
18
19
 
@@ -22,11 +23,12 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
22
23
  options={{
23
24
  mode: 'hosted',
24
25
  backendURL: 'https://your-instance.c15t.dev',
25
- iab: {
26
- enabled: true,
27
- cmpId: 123,
26
+ iab: iab({
28
27
  vendors: [1, 2, 10, 25],
29
- },
28
+ // cmpId is automatically provided by the backend when using consent.io.
29
+ // Only set this if you have your own CMP registration.
30
+ // cmpId: 123,
31
+ }),
30
32
  }}
31
33
  >
32
34
  <IABConsentBanner />
@@ -15,12 +15,12 @@ When your site participates in the IAB ecosystem (ad exchanges, SSPs, DSPs, DMPs
15
15
 
16
16
  ## CMP Registration
17
17
 
18
- [consent.io](https://consent.io) is pending validation as an IAB Europe-registered CMP for c15t. Once approved, when you use consent.io as your backend, the correct CMP ID will be automatically provided to your client via the `/init` endpoint — no client-side configuration needed.
18
+ [inth.com](https://inth.com) is pending validation as an IAB Europe-registered CMP for c15t. Once approved, when you use inth.com as your backend, the correct CMP ID will be automatically provided to your client via the `/init` endpoint — no client-side configuration needed.
19
19
 
20
20
  If you self-host the c15t backend and have your own CMP registration with IAB Europe, you can configure your CMP ID on the backend via `advanced.iab.cmpId` or on the client via the `iab.cmpId` option. A valid (non-zero) CMP ID is required for IAB TCF compliance.
21
21
 
22
22
  > ℹ️ **Info:**
23
- > If you heavily customize or build your own IAB banner or dialog (rather than using the default IABConsentBanner and IABConsentDialog components), you cannot use consent.io's CMP ID. You must register your own CMP with IAB Europe and use your own CMP ID.
23
+ > If you heavily customize or build your own IAB banner or dialog (rather than using the default IABConsentBanner and IABConsentDialog components), you cannot use inth.com's CMP ID. You must register your own CMP with IAB Europe and use your own CMP ID.
24
24
 
25
25
  ## How c15t Implements TCF
26
26
 
@@ -45,6 +45,7 @@ If you use the prebuilt styled IAB UI, import the IAB stylesheet alongside the b
45
45
 
46
46
  ```tsx
47
47
  import { type ReactNode } from 'react';
48
+ import { iab } from '@c15t/iab';
48
49
  import { ConsentManagerProvider } from '@c15t/react';
49
50
  import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';
50
51
 
@@ -54,13 +55,12 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
54
55
  options={{
55
56
  mode: 'hosted',
56
57
  backendURL: 'https://your-instance.c15t.dev',
57
- iab: {
58
- enabled: true,
58
+ iab: iab({
59
59
  vendors: [1, 2, 10, 25], // IAB vendor IDs you work with
60
- // cmpId is automatically provided by the backend (consent.io).
60
+ // cmpId is automatically provided by the backend (inth.com).
61
61
  // Only set this if you have your own CMP registration with IAB Europe.
62
62
  // cmpId: 123,
63
- },
63
+ }),
64
64
  }}
65
65
  >
66
66
  <IABConsentBanner />
@@ -73,14 +73,13 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
73
73
 
74
74
  ## IAB Configuration Options
75
75
 
76
- The `iab` option on the provider accepts:
76
+ Configure IAB mode with `iab({ ... })` from `@c15t/iab`. The factory enables the addon and injects the runtime module automatically. The user-facing options are:
77
77
 
78
78
  |Option|Type|Description|
79
79
  |--|--|--|
80
- |`enabled`|`boolean`|Enable IAB TCF mode|
81
- |`cmpId`|`number`|CMP ID registered with IAB Europe. Automatically provided by the backend when using consent.io. Only set this if you have your own CMP registration.|
80
+ |`cmpId`|`number`|CMP ID registered with IAB Europe. Automatically provided by the backend when using inth.com. Only set this if you have your own CMP registration.|
82
81
  |`vendors`|`number[]`|IAB vendor IDs that your site works with|
83
- |`nonIABVendors`|`NonIABVendor[]`|Custom vendors not in the IAB registry|
82
+ |`customVendors`|`NonIABVendor[]`|Custom vendors not in the IAB registry|
84
83
 
85
84
  ## Key Concepts
86
85
 
@@ -122,4 +121,6 @@ Each vendor in the GVL declares which purposes it uses, whether via consent or l
122
121
  |--|--|
123
122
  |[IABConsentBanner](/docs/frameworks/react/iab/consent-banner)|TCF-compliant banner with partner disclosure|
124
123
  |[IABConsentDialog](/docs/frameworks/react/iab/consent-dialog)|Tabbed preference center for purposes and vendors|
125
- |[useGVLData](/docs/frameworks/react/iab/use-gvl-data)|Hook for building custom IAB UI|
124
+
125
+ > ℹ️ **Info:**
126
+ > For lower-level custom IAB flows, use useHeadlessIABConsentUI() from @c15t/react/iab. useGVLData() is currently internal and is not part of the public package surface.