@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.
- package/README.md +3 -3
- package/dist/components/consent-banner/consent-banner.cjs +1 -1
- package/dist/components/consent-banner/consent-banner.js +1 -1
- package/dist/components/consent-dialog/atoms/card.cjs +1 -1
- package/dist/components/consent-dialog/atoms/card.js +1 -1
- package/dist/components/consent-widget/atoms/root.cjs +1 -1
- package/dist/components/consent-widget/atoms/root.js +1 -1
- package/dist/components/consent-widget/consent-widget.cjs +1 -1
- package/dist/components/consent-widget/consent-widget.js +1 -1
- package/dist/components/iab-consent-banner/iab-consent-banner.cjs +1 -1
- package/dist/components/iab-consent-banner/iab-consent-banner.js +1 -1
- package/dist/components/iab-consent-dialog/iab-consent-dialog.cjs +1 -1
- package/dist/components/iab-consent-dialog/iab-consent-dialog.js +1 -1
- package/dist/components/shared/ui/branding.cjs +1 -1
- package/dist/components/shared/ui/branding.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/version.cjs +1 -1
- package/dist/version.js +1 -1
- package/dist-types/components/consent-dialog/atoms/card.d.ts +1 -0
- package/dist-types/components/consent-dialog/index.d.ts +2 -1
- package/dist-types/components/consent-widget/atoms/root.d.ts +0 -5
- package/dist-types/components/shared/ui/branding.d.ts +5 -1
- package/dist-types/types/consent-manager.d.ts +2 -2
- package/dist-types/version.d.ts +1 -1
- package/docs/building-headless-components.md +118 -16
- package/docs/components/consent-banner.md +1 -30
- package/docs/components/consent-dialog.md +4 -3
- package/docs/components/consent-manager-provider.md +11 -11
- package/docs/components/consent-widget.md +1 -28
- package/docs/concepts/client-modes.md +1 -1
- package/docs/concepts/policy-packs.md +1 -1
- package/docs/hooks/use-consent-manager/overview.md +18 -2
- package/docs/iab/consent-banner.md +6 -4
- package/docs/iab/consent-dialog.md +6 -4
- package/docs/iab/overview.md +12 -11
- package/docs/iab/use-gvl-data.md +9 -197
- package/docs/internationalization.md +1 -1
- package/docs/optimization.md +35 -1
- package/docs/policy-packs.md +1 -1
- package/docs/quickstart.md +11 -8
- package/docs/styling/color-scheme.md +1 -1
- package/docs/styling/css-variables.md +1 -1
- package/docs/styling/overview.md +11 -4
- package/docs/styling/slots.md +7 -3
- package/docs/styling/tokens.md +3 -1
- package/package.json +7 -8
package/docs/iab/use-gvl-data.md
CHANGED
|
@@ -1,208 +1,20 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: useGVLData
|
|
3
|
-
description:
|
|
2
|
+
title: useGVLData (Internal)
|
|
3
|
+
description: Status note for the internal GVL hook used by the built-in IAB dialog.
|
|
4
4
|
---
|
|
5
5
|
> ❌ **Error:**
|
|
6
6
|
> c15t is not yet IAB certified. The IAB TCF components are under active development and should not be used in production. APIs and behavior may change before certification is achieved.
|
|
7
7
|
|
|
8
|
-
`useGVLData()`
|
|
8
|
+
`useGVLData()` currently powers the built-in `IABConsentDialog`, but it is **not part of the public package surface**.
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Older docs showed it as a public hook. That is no longer accurate.
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
import { useGVLData } from '@c15t/react/hooks';
|
|
12
|
+
If you need supported customization points today:
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
if (isLoading) return <p>Loading vendor data...</p>;
|
|
19
|
-
|
|
20
|
-
return (
|
|
21
|
-
<div>
|
|
22
|
-
<p>{totalVendors} partners</p>
|
|
23
|
-
{standalonePurposes.map((purpose) => (
|
|
24
|
-
<div key={purpose.id}>
|
|
25
|
-
<h3>{purpose.name}</h3>
|
|
26
|
-
<p>{purpose.description}</p>
|
|
27
|
-
<p>{purpose.vendors.length} vendors</p>
|
|
28
|
-
</div>
|
|
29
|
-
))}
|
|
30
|
-
</div>
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
```
|
|
14
|
+
* Use `IABConsentBanner` and `IABConsentDialog` from `@c15t/react/iab` for the supported prebuilt UI
|
|
15
|
+
* Use `useHeadlessIABConsentUI()` from `@c15t/react/iab` when you need lower-level control over banner/dialog state and actions
|
|
34
16
|
|
|
35
17
|
> ℹ️ **Info:**
|
|
36
|
-
>
|
|
37
|
-
|
|
38
|
-
## Return Value
|
|
39
|
-
|
|
40
|
-
The hook returns a `GVLData` object:
|
|
41
|
-
|
|
42
|
-
### GVLData
|
|
43
|
-
|
|
44
|
-
|Property|Type|Description|Default|Required|
|
|
45
|
-
|:--|:--|:--|:--|:--:|
|
|
46
|
-
|purposes|ProcessedPurpose|-|-|✅ Required|
|
|
47
|
-
|specialPurposes|ProcessedPurpose|-|-|✅ Required|
|
|
48
|
-
|specialFeatures|ProcessedSpecialFeature|-|-|✅ Required|
|
|
49
|
-
|features|ProcessedFeature|-|-|✅ Required|
|
|
50
|
-
|stacks|ProcessedStack|-|-|✅ Required|
|
|
51
|
-
|standalonePurposes|ProcessedPurpose|-|-|✅ Required|
|
|
52
|
-
|totalVendors|number|-|-|✅ Required|
|
|
53
|
-
|isLoading|boolean|-|-|✅ Required|
|
|
54
|
-
|
|
55
|
-
#### `purposes` ProcessedPurpose
|
|
56
|
-
|
|
57
|
-
|Property|Type|Description|Default|Required|
|
|
58
|
-
|:--|:--|:--|:--|:--:|
|
|
59
|
-
|id|number|-|-|✅ Required|
|
|
60
|
-
|name|string|-|-|✅ Required|
|
|
61
|
-
|description|string|-|-|✅ Required|
|
|
62
|
-
|descriptionLegal|string \|undefined|-|-|Optional|
|
|
63
|
-
|illustrations|string\[]|-|-|✅ Required|
|
|
64
|
-
|vendors|ProcessedVendor|-|-|✅ Required|
|
|
65
|
-
|isSpecialPurpose|boolean \|undefined|-|-|Optional|
|
|
66
|
-
|
|
67
|
-
#### `specialPurposes` ProcessedPurpose
|
|
68
|
-
|
|
69
|
-
|Property|Type|Description|Default|Required|
|
|
70
|
-
|:--|:--|:--|:--|:--:|
|
|
71
|
-
|id|number|-|-|✅ Required|
|
|
72
|
-
|name|string|-|-|✅ Required|
|
|
73
|
-
|description|string|-|-|✅ Required|
|
|
74
|
-
|descriptionLegal|string \|undefined|-|-|Optional|
|
|
75
|
-
|illustrations|string\[]|-|-|✅ Required|
|
|
76
|
-
|vendors|ProcessedVendor|-|-|✅ Required|
|
|
77
|
-
|isSpecialPurpose|boolean \|undefined|-|-|Optional|
|
|
78
|
-
|
|
79
|
-
#### `specialFeatures` ProcessedSpecialFeature
|
|
80
|
-
|
|
81
|
-
|Property|Type|Description|Default|Required|
|
|
82
|
-
|:--|:--|:--|:--|:--:|
|
|
83
|
-
|id|number|-|-|✅ Required|
|
|
84
|
-
|name|string|-|-|✅ Required|
|
|
85
|
-
|description|string|-|-|✅ Required|
|
|
86
|
-
|descriptionLegal|string \|undefined|-|-|Optional|
|
|
87
|
-
|illustrations|string\[]|-|-|✅ Required|
|
|
88
|
-
|vendors|ProcessedVendor|-|-|✅ Required|
|
|
89
|
-
|
|
90
|
-
#### `features` ProcessedFeature
|
|
91
|
-
|
|
92
|
-
|Property|Type|Description|Default|Required|
|
|
93
|
-
|:--|:--|:--|:--|:--:|
|
|
94
|
-
|id|number|-|-|✅ Required|
|
|
95
|
-
|name|string|-|-|✅ Required|
|
|
96
|
-
|description|string|-|-|✅ Required|
|
|
97
|
-
|descriptionLegal|string \|undefined|-|-|Optional|
|
|
98
|
-
|illustrations|string\[]|-|-|✅ Required|
|
|
99
|
-
|vendors|ProcessedVendor|-|-|✅ Required|
|
|
100
|
-
|
|
101
|
-
#### `stacks` ProcessedStack
|
|
102
|
-
|
|
103
|
-
|Property|Type|Description|Default|Required|
|
|
104
|
-
|:--|:--|:--|:--|:--:|
|
|
105
|
-
|id|number|-|-|✅ Required|
|
|
106
|
-
|name|string|-|-|✅ Required|
|
|
107
|
-
|description|string|-|-|✅ Required|
|
|
108
|
-
|purposes|ProcessedPurpose|-|-|✅ Required|
|
|
109
|
-
|
|
110
|
-
#### `standalonePurposes` ProcessedPurpose
|
|
111
|
-
|
|
112
|
-
|Property|Type|Description|Default|Required|
|
|
113
|
-
|:--|:--|:--|:--|:--:|
|
|
114
|
-
|id|number|-|-|✅ Required|
|
|
115
|
-
|name|string|-|-|✅ Required|
|
|
116
|
-
|description|string|-|-|✅ Required|
|
|
117
|
-
|descriptionLegal|string \|undefined|-|-|Optional|
|
|
118
|
-
|illustrations|string\[]|-|-|✅ Required|
|
|
119
|
-
|vendors|ProcessedVendor|-|-|✅ Required|
|
|
120
|
-
|isSpecialPurpose|boolean \|undefined|-|-|Optional|
|
|
121
|
-
|
|
122
|
-
## Types
|
|
123
|
-
|
|
124
|
-
### ProcessedPurpose
|
|
125
|
-
|
|
126
|
-
|Property|Type|Description|Default|Required|
|
|
127
|
-
|:--|:--|:--|:--|:--:|
|
|
128
|
-
|id|number|-|-|✅ Required|
|
|
129
|
-
|name|string|-|-|✅ Required|
|
|
130
|
-
|description|string|-|-|✅ Required|
|
|
131
|
-
|descriptionLegal|string \|undefined|-|-|Optional|
|
|
132
|
-
|illustrations|string\[]|-|-|✅ Required|
|
|
133
|
-
|vendors|ProcessedVendor|-|-|✅ Required|
|
|
134
|
-
|isSpecialPurpose|boolean \|undefined|-|-|Optional|
|
|
135
|
-
|
|
136
|
-
#### `vendors` ProcessedVendor
|
|
137
|
-
|
|
138
|
-
|Property|Type|Description|Default|Required|
|
|
139
|
-
|:--|:--|:--|:--|:--:|
|
|
140
|
-
|id|VendorId|-|-|✅ Required|
|
|
141
|
-
|name|string|-|-|✅ Required|
|
|
142
|
-
|policyUrl|string|-|-|✅ Required|
|
|
143
|
-
|usesNonCookieAccess|boolean|-|-|✅ Required|
|
|
144
|
-
|deviceStorageDisclosureUrl|string \|null|-|-|✅ Required|
|
|
145
|
-
|usesCookies|boolean|-|-|✅ Required|
|
|
146
|
-
|cookieMaxAgeSeconds|number \|null|-|-|✅ Required|
|
|
147
|
-
|cookieRefresh|boolean \|undefined|-|-|Optional|
|
|
148
|
-
|specialPurposes|number\[]|-|-|✅ Required|
|
|
149
|
-
|specialFeatures|number\[]|-|-|✅ Required|
|
|
150
|
-
|features|number\[]|-|-|✅ Required|
|
|
151
|
-
|purposes|number\[]|-|-|✅ Required|
|
|
152
|
-
|legIntPurposes|number\[]|-|-|✅ Required|
|
|
153
|
-
|legitimateInterestUrl|string \|null \|undefined|-|-|Optional|
|
|
154
|
-
|isCustom|boolean \|undefined|-|-|Optional|
|
|
155
|
-
|usesLegitimateInterest|boolean \|undefined|-|-|Optional|
|
|
156
|
-
|dataRetention|Object \|undefined|-|-|Optional|
|
|
157
|
-
|dataDeclaration|number\[] \|undefined|-|-|Optional|
|
|
158
|
-
|
|
159
|
-
### ProcessedVendor
|
|
160
|
-
|
|
161
|
-
|Property|Type|Description|Default|Required|
|
|
162
|
-
|:--|:--|:--|:--|:--:|
|
|
163
|
-
|id|VendorId|-|-|✅ Required|
|
|
164
|
-
|name|string|-|-|✅ Required|
|
|
165
|
-
|policyUrl|string|-|-|✅ Required|
|
|
166
|
-
|usesNonCookieAccess|boolean|-|-|✅ Required|
|
|
167
|
-
|deviceStorageDisclosureUrl|string \|null|-|-|✅ Required|
|
|
168
|
-
|usesCookies|boolean|-|-|✅ Required|
|
|
169
|
-
|cookieMaxAgeSeconds|number \|null|-|-|✅ Required|
|
|
170
|
-
|cookieRefresh|boolean \|undefined|-|-|Optional|
|
|
171
|
-
|specialPurposes|number\[]|-|-|✅ Required|
|
|
172
|
-
|specialFeatures|number\[]|-|-|✅ Required|
|
|
173
|
-
|features|number\[]|-|-|✅ Required|
|
|
174
|
-
|purposes|number\[]|-|-|✅ Required|
|
|
175
|
-
|legIntPurposes|number\[]|-|-|✅ Required|
|
|
176
|
-
|legitimateInterestUrl|string \|null \|undefined|-|-|Optional|
|
|
177
|
-
|isCustom|boolean \|undefined|-|-|Optional|
|
|
178
|
-
|usesLegitimateInterest|boolean \|undefined|-|-|Optional|
|
|
179
|
-
|dataRetention|Object \|undefined|-|-|Optional|
|
|
180
|
-
|dataDeclaration|number\[] \|undefined|-|-|Optional|
|
|
181
|
-
|
|
182
|
-
#### `dataRetention`
|
|
183
|
-
|
|
184
|
-
|Property|Type|Description|Default|Required|
|
|
185
|
-
|:--|:--|:--|:--|:--:|
|
|
186
|
-
|purposes|Record\<number, number> \|undefined|-|-|Optional|
|
|
187
|
-
|specialPurposes|Record\<number, number> \|undefined|-|-|Optional|
|
|
188
|
-
|stdRetention|number \|undefined|-|-|Optional|
|
|
189
|
-
|
|
190
|
-
### ProcessedStack
|
|
191
|
-
|
|
192
|
-
|Property|Type|Description|Default|Required|
|
|
193
|
-
|:--|:--|:--|:--|:--:|
|
|
194
|
-
|id|number|-|-|✅ Required|
|
|
195
|
-
|name|string|-|-|✅ Required|
|
|
196
|
-
|description|string|-|-|✅ Required|
|
|
197
|
-
|purposes|ProcessedPurpose|-|-|✅ Required|
|
|
198
|
-
|
|
199
|
-
### ProcessedSpecialFeature
|
|
18
|
+
> Until useGVLData() is exported as public API, avoid importing it from deep internal paths. Those paths are not covered by semver guarantees and can change without notice.
|
|
200
19
|
|
|
201
|
-
|
|
202
|
-
|:--|:--|:--|:--|:--:|
|
|
203
|
-
|id|number|-|-|✅ Required|
|
|
204
|
-
|name|string|-|-|✅ Required|
|
|
205
|
-
|description|string|-|-|✅ Required|
|
|
206
|
-
|descriptionLegal|string \|undefined|-|-|Optional|
|
|
207
|
-
|illustrations|string\[]|-|-|✅ Required|
|
|
208
|
-
|vendors|ProcessedVendor|-|-|✅ Required|
|
|
20
|
+
When a public GVL-focused hook becomes part of the supported API, this page should document that public surface instead of the internal dialog hook.
|
|
@@ -10,7 +10,7 @@ There are two ways c15t can load translations: client-side or server-side.
|
|
|
10
10
|
|
|
11
11
|
|Server-side|Client-side|
|
|
12
12
|
|--|--|
|
|
13
|
-
|The best way to reduce bundle size and improve performance. We can detect the user's language based on the browser's language settings, allowing for the most accurate translations. By default, when using a [
|
|
13
|
+
|The best way to reduce bundle size and improve performance. We can detect the user's language based on the browser's language settings, allowing for the most accurate translations. By default, when using a [inth.com](https://inth.com) hosted instance, [these languages](https://github.com/c15t/c15t/tree/main/packages/translations/src/translations) are supported.|Bundled with the application allowing for multiple languages to be supported without the need for a backend. The more translations you have, the larger the bundle size will be, which may impact the performance of your application.|
|
|
14
14
|
|
|
15
15
|
## Basic Configuration
|
|
16
16
|
|
package/docs/optimization.md
CHANGED
|
@@ -1,10 +1,25 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Optimization
|
|
3
3
|
description: Improve c15t startup performance in React with prefetching, proxy rewrites, and rendering tradeoffs.
|
|
4
|
-
lastModified: 2026-
|
|
4
|
+
lastModified: 2026-04-14
|
|
5
5
|
---
|
|
6
6
|
Use this guide when you care about banner visibility speed, route static-ness, and reducing backend round-trip cost.
|
|
7
7
|
|
|
8
|
+
## Start Here
|
|
9
|
+
|
|
10
|
+
Apply the optimizations in this order:
|
|
11
|
+
|
|
12
|
+
|Situation|Use|Why|Tradeoff|
|
|
13
|
+
|--|--|--|--|
|
|
14
|
+
|Any production app using hosted mode|Same-origin `/api/c15t` proxy|Lowers browser startup overhead and keeps the backend origin out of client config|Requires framework or platform proxy setup|
|
|
15
|
+
|Banner speed matters on cold loads|`buildPrefetchScript()`|Starts `/init` before your app hydrates|Still a browser-side fetch, not SSR|
|
|
16
|
+
|Your app navigates client-side|Keep the provider mounted at the app root|Avoids remounting and re-running init work|Requires provider placement discipline|
|
|
17
|
+
|You cannot proxy and must stay cross-origin|`<link rel="preconnect">`|Starts DNS/TLS work earlier|Smaller gain than same-origin proxying|
|
|
18
|
+
|You are using Next.js and want SSR or static-route-specific guidance|Next.js optimization docs|Covers `C15tPrefetch`, `fetchInitialData()`, and rendering tradeoffs|Next-specific|
|
|
19
|
+
|
|
20
|
+
> ℹ️ **Info:**
|
|
21
|
+
> Treat same-origin proxying as the baseline optimization. The others are situational layers you add when startup timing or route behavior justifies them.
|
|
22
|
+
|
|
8
23
|
## 1) Prefer Same-Origin Proxy
|
|
9
24
|
|
|
10
25
|
Proxy c15t requests through your app server so the browser calls your own origin instead of a third-party domain.
|
|
@@ -23,6 +38,8 @@ Why this helps:
|
|
|
23
38
|
* Ad blockers are less likely to block your init endpoint
|
|
24
39
|
* You can change backend infrastructure without touching client code
|
|
25
40
|
|
|
41
|
+
If you can only do one optimization, do this one first.
|
|
42
|
+
|
|
26
43
|
## 2) Prefetch Init Data Early
|
|
27
44
|
|
|
28
45
|
Use `buildPrefetchScript()` from the `c15t` core package to start the `/init` request before your app hydrates. Inject the script as early as possible in your HTML `<head>`.
|
|
@@ -35,6 +52,12 @@ In production benchmarks with a same-origin rewrite, prefetching strategies show
|
|
|
35
52
|
|Browser prefetch|\~1.3x faster|\~2.6x earlier|\~1.25x faster|
|
|
36
53
|
|Server prefetch|\~2x faster|before page loads|\~1.9x faster|
|
|
37
54
|
|
|
55
|
+
Use this when:
|
|
56
|
+
|
|
57
|
+
* The app is client-rendered
|
|
58
|
+
* You want a faster first banner without introducing SSR complexity
|
|
59
|
+
* You control the HTML template or document `<head>`
|
|
60
|
+
|
|
38
61
|
### Inline Script Prefetch
|
|
39
62
|
|
|
40
63
|
```tsx
|
|
@@ -88,6 +111,8 @@ Why this helps:
|
|
|
88
111
|
* Prevents extra callback churn from remount cycles
|
|
89
112
|
* Keeps banner/dialog state stable between route transitions
|
|
90
113
|
|
|
114
|
+
Mount `ConsentManagerProvider` as high in the tree as possible so route transitions do not recreate it.
|
|
115
|
+
|
|
91
116
|
## Animation Performance
|
|
92
117
|
|
|
93
118
|
The default motion tokens are tuned for speed-first product UI:
|
|
@@ -104,6 +129,8 @@ To customize motion durations and easing, see [Styling](/docs/frameworks/react/s
|
|
|
104
129
|
|
|
105
130
|
## Reduce Network Overhead
|
|
106
131
|
|
|
132
|
+
If your browser must call a cross-origin backend URL directly, add `preconnect` so the browser can warm up the connection earlier. This is a fallback optimization when same-origin proxying is not possible.
|
|
133
|
+
|
|
107
134
|
If you must use a cross-origin backend URL, add preconnect so the browser starts DNS/TLS early:
|
|
108
135
|
|
|
109
136
|
```tsx
|
|
@@ -111,3 +138,10 @@ If you must use a cross-origin backend URL, add preconnect so the browser starts
|
|
|
111
138
|
<link rel="preconnect" href="https://your-instance.c15t.dev" crossOrigin="" />
|
|
112
139
|
</head>
|
|
113
140
|
```
|
|
141
|
+
|
|
142
|
+
## Next.js-Specific SSR And Static Routes
|
|
143
|
+
|
|
144
|
+
This page is intentionally React-generic. If you are using Next.js and need SSR or static-route-specific guidance:
|
|
145
|
+
|
|
146
|
+
* See [Next.js Optimization](/docs/frameworks/next/optimization) for the static-vs-dynamic decision guide
|
|
147
|
+
* See [Next.js Server-Side Data Fetching](/docs/frameworks/next/server-side) for `fetchInitialData()`
|
package/docs/policy-packs.md
CHANGED
|
@@ -13,7 +13,7 @@ When a backend isn't available — local development, static previews, Storybook
|
|
|
13
13
|
|
|
14
14
|
## Hosted Mode (Recommended)
|
|
15
15
|
|
|
16
|
-
When using
|
|
16
|
+
When using inth.com or a self-hosted backend, the provider connects automatically. No policy configuration is needed on the frontend:
|
|
17
17
|
|
|
18
18
|
```tsx
|
|
19
19
|
<ConsentManagerProvider
|
package/docs/quickstart.md
CHANGED
|
@@ -17,10 +17,10 @@ availableIn:
|
|
|
17
17
|
|
|
18
18
|
|Package manager|Command|
|
|
19
19
|
|:--|:--|
|
|
20
|
-
|npm|`npx @c15t/cli
|
|
21
|
-
|pnpm|`pnpm dlx @c15t/cli
|
|
22
|
-
|yarn|`yarn dlx @c15t/cli
|
|
23
|
-
|bun|`bunx @c15t/cli
|
|
20
|
+
|npm|`npx @c15t/cli`|
|
|
21
|
+
|pnpm|`pnpm dlx @c15t/cli`|
|
|
22
|
+
|yarn|`yarn dlx @c15t/cli`|
|
|
23
|
+
|bun|`bunx @c15t/cli`|
|
|
24
24
|
|
|
25
25
|
## Manual Installation
|
|
26
26
|
|
|
@@ -107,6 +107,9 @@ availableIn:
|
|
|
107
107
|
|
|
108
108
|
A consent banner appears at the bottom of the pageClicking "Customize" opens a dialog with toggles for each consent categoryAfter accepting or rejecting, the banner dismisses and your choice persists across page reloads
|
|
109
109
|
|
|
110
|
+
> ℹ️ **Info:**
|
|
111
|
+
> Want to improve startup performance? See Optimization for the decision guide, prefetch setup, and network tuning.
|
|
112
|
+
|
|
110
113
|
## Optional: Add DevTools
|
|
111
114
|
|
|
112
115
|
Install DevTools only if you want a runtime inspector while building and debugging:
|
|
@@ -142,10 +145,10 @@ Install c15t agent skills to let AI agents help with styling, i18n, scripts & ot
|
|
|
142
145
|
|
|
143
146
|
|Package manager|Command|
|
|
144
147
|
|:--|:--|
|
|
145
|
-
|npm|`npx @c15t/cli
|
|
146
|
-
|pnpm|`pnpm dlx @c15t/cli
|
|
147
|
-
|yarn|`yarn dlx @c15t/cli
|
|
148
|
-
|bun|`bunx @c15t/cli
|
|
148
|
+
|npm|`npx @c15t/cli skills`|
|
|
149
|
+
|pnpm|`pnpm dlx @c15t/cli skills`|
|
|
150
|
+
|yarn|`yarn dlx @c15t/cli skills`|
|
|
151
|
+
|bun|`bunx @c15t/cli skills`|
|
|
149
152
|
|
|
150
153
|
See [AI Agents](/docs/ai-agents) for bundled package docs and agent skills.
|
|
151
154
|
|
|
@@ -65,7 +65,7 @@ function ThemeToggle() {
|
|
|
65
65
|
|
|
66
66
|
## How Dark Mode Works
|
|
67
67
|
|
|
68
|
-
When dark mode is active, c15t applies the `dark` token values as CSS variable overrides. Only tokens specified in `dark` are overridden - unset tokens fall back to the `colors` values.
|
|
68
|
+
When dark mode is active, c15t applies the `dark` token values as CSS variable overrides. Only tokens specified in `dark` are overridden - unset tokens fall back to the `colors` values. This also applies to `textOnPrimary`: if you omit it, c15t derives a readable foreground from the active `primary` color in that scheme.
|
|
69
69
|
|
|
70
70
|
```tsx
|
|
71
71
|
const theme = {
|
|
@@ -18,7 +18,7 @@ Every theme token is converted to a `--c15t-*` CSS custom property at runtime. Y
|
|
|
18
18
|
|--c15t-border-hover|string \|undefined|\`colors.borderHover\` (default: \`hsl(0, 0%, 85%)\`)|-|Optional|
|
|
19
19
|
|--c15t-text|string \|undefined|\`colors.text\` (default: \`hsl(0, 0%, 10%)\`)|-|Optional|
|
|
20
20
|
|--c15t-text-muted|string \|undefined|\`colors.textMuted\` (default: \`hsl(0, 0%, 40%)\`)|-|Optional|
|
|
21
|
-
|--c15t-text-on-primary|string \|undefined|\`colors.textOnPrimary\` (
|
|
21
|
+
|--c15t-text-on-primary|string \|undefined|\`colors.textOnPrimary\` (auto-derived from \`colors.primary\` when omitted)|-|Optional|
|
|
22
22
|
|--c15t-overlay|string \|undefined|\`colors.overlay\` (default: \`hsla(0, 0%, 0%, 0.5)\`)|-|Optional|
|
|
23
23
|
|--c15t-switch-track|string \|undefined|\`colors.switchTrack\` (default: \`hsl(0, 0%, 85%)\`)|-|Optional|
|
|
24
24
|
|--c15t-switch-track-active|string \|undefined|\`colors.switchTrackActive\` (default: \`hsl(228, 100%, 60%)\`)|-|Optional|
|
package/docs/styling/overview.md
CHANGED
|
@@ -102,6 +102,7 @@ Use tokens first when the change is semantic:
|
|
|
102
102
|
* Banner card background -> `theme.colors.surface`
|
|
103
103
|
* Banner footer background -> `theme.colors.surfaceHover`
|
|
104
104
|
* Shared copy color -> `theme.colors.text` and `theme.colors.textMuted`
|
|
105
|
+
* Primary-filled surfaces such as stock branding tags and filled actions -> `theme.colors.primary` with `theme.colors.textOnPrimary` as the matching foreground override
|
|
105
106
|
|
|
106
107
|
```tsx
|
|
107
108
|
options={{
|
|
@@ -114,6 +115,8 @@ options={{
|
|
|
114
115
|
}}
|
|
115
116
|
```
|
|
116
117
|
|
|
118
|
+
If you set `theme.colors.primary` but omit `theme.colors.textOnPrimary`, c15t derives a readable foreground automatically. Add `textOnPrimary` only when you need to force a specific branded foreground color.
|
|
119
|
+
|
|
117
120
|
### 3. Component slots
|
|
118
121
|
|
|
119
122
|
Target specific component parts via the `slots` object:
|
|
@@ -317,7 +320,7 @@ Color palette for light mode.
|
|
|
317
320
|
|borderHover|string \|undefined|Hover state for bordered elements.|-|Optional|
|
|
318
321
|
|text|string \|undefined|Primary text color for headings and body.|-|Optional|
|
|
319
322
|
|textMuted|string \|undefined|Muted text color for secondary content.|-|Optional|
|
|
320
|
-
|textOnPrimary|string \|undefined|Text color for content on primary background.|-|Optional|
|
|
323
|
+
|textOnPrimary|string \|undefined|Text color for content on primary background. Auto-derived from \`primary\` when omitted.|-|Optional|
|
|
321
324
|
|overlay|string \|undefined|Overlay color for modal backdrops.|-|Optional|
|
|
322
325
|
|switchTrack|string \|undefined|Toggle track color (off state).|-|Optional|
|
|
323
326
|
|switchTrackActive|string \|undefined|Toggle track color (on state).|-|Optional|
|
|
@@ -337,7 +340,7 @@ Dark mode color overrides.
|
|
|
337
340
|
|borderHover|string \|undefined|Hover state for bordered elements.|-|Optional|
|
|
338
341
|
|text|string \|undefined|Primary text color for headings and body.|-|Optional|
|
|
339
342
|
|textMuted|string \|undefined|Muted text color for secondary content.|-|Optional|
|
|
340
|
-
|textOnPrimary|string \|undefined|Text color for content on primary background.|-|Optional|
|
|
343
|
+
|textOnPrimary|string \|undefined|Text color for content on primary background. Auto-derived from \`primary\` when omitted.|-|Optional|
|
|
341
344
|
|overlay|string \|undefined|Overlay color for modal backdrops.|-|Optional|
|
|
342
345
|
|switchTrack|string \|undefined|Toggle track color (off state).|-|Optional|
|
|
343
346
|
|switchTrackActive|string \|undefined|Toggle track color (on state).|-|Optional|
|
|
@@ -423,6 +426,7 @@ Component-specific style overrides.
|
|
|
423
426
|
|consentBannerDescription|SlotStyle \|undefined|Banner description text element.|-|Optional|
|
|
424
427
|
|consentBannerFooter|SlotStyle \|undefined|Footer container for banner action buttons.|-|Optional|
|
|
425
428
|
|consentBannerFooterSubGroup|SlotStyle \|undefined|Nested button group inside the banner footer.|-|Optional|
|
|
429
|
+
|consentBannerTag|SlotStyle \|undefined|Branding tag rendered above the consent banner card.|-|Optional|
|
|
426
430
|
|consentBannerOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the banner when enabled.|-|Optional|
|
|
427
431
|
|consentDialog|SlotStyle \|undefined|Root wrapper for the consent dialog modal.|-|Optional|
|
|
428
432
|
|consentDialogCard|SlotStyle \|undefined|Main dialog card container.|-|Optional|
|
|
@@ -430,22 +434,25 @@ Component-specific style overrides.
|
|
|
430
434
|
|consentDialogTitle|SlotStyle \|undefined|Dialog title text element.|-|Optional|
|
|
431
435
|
|consentDialogDescription|SlotStyle \|undefined|Dialog description text element.|-|Optional|
|
|
432
436
|
|consentDialogContent|SlotStyle \|undefined|Dialog content region (typically holds ConsentWidget).|-|Optional|
|
|
433
|
-
|consentDialogFooter|SlotStyle \|undefined|
|
|
437
|
+
|consentDialogFooter|SlotStyle \|undefined|Footer container used by compound dialog layouts.|-|Optional|
|
|
438
|
+
|consentDialogTag|SlotStyle \|undefined|Branding tag rendered below the stock consent dialog card.|-|Optional|
|
|
434
439
|
|consentDialogOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the dialog.|-|Optional|
|
|
435
440
|
|consentWidget|SlotStyle \|undefined|Root wrapper for the consent widget/preferences panel.|-|Optional|
|
|
436
441
|
|consentWidgetAccordion|SlotStyle \|undefined|Accordion region listing consent categories.|-|Optional|
|
|
437
442
|
|consentWidgetFooter|SlotStyle \|undefined|Footer area for widget actions and links.|-|Optional|
|
|
438
|
-
|
|
|
443
|
+
|consentWidgetTag|SlotStyle \|undefined|Branding tag rendered below the standalone consent widget.|-|Optional|
|
|
439
444
|
|frame|SlotStyle \|undefined|Frame wrapper used by blocking placeholders (e.g., iframe blocking).|-|Optional|
|
|
440
445
|
|iabConsentBanner|SlotStyle \|undefined|Root wrapper for the IAB consent banner.|-|Optional|
|
|
441
446
|
|iabConsentBannerCard|SlotStyle \|undefined|Main card container for IAB banner content.|-|Optional|
|
|
442
447
|
|iabConsentBannerHeader|SlotStyle \|undefined|Header region for IAB banner title/description.|-|Optional|
|
|
443
448
|
|iabConsentBannerFooter|SlotStyle \|undefined|Footer container for IAB banner actions.|-|Optional|
|
|
449
|
+
|iabConsentBannerTag|SlotStyle \|undefined|Branding tag rendered above the IAB banner card.|-|Optional|
|
|
444
450
|
|iabConsentBannerOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the IAB banner.|-|Optional|
|
|
445
451
|
|iabConsentDialog|SlotStyle \|undefined|Root wrapper for the IAB consent dialog.|-|Optional|
|
|
446
452
|
|iabConsentDialogCard|SlotStyle \|undefined|Main card container for IAB dialog content.|-|Optional|
|
|
447
453
|
|iabConsentDialogHeader|SlotStyle \|undefined|Header region for IAB dialog title/description.|-|Optional|
|
|
448
454
|
|iabConsentDialogFooter|SlotStyle \|undefined|Footer container for IAB dialog actions.|-|Optional|
|
|
455
|
+
|iabConsentDialogTag|SlotStyle \|undefined|Branding tag rendered below the IAB dialog card.|-|Optional|
|
|
449
456
|
|iabConsentDialogOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the IAB dialog.|-|Optional|
|
|
450
457
|
|buttonPrimary|SlotStyle \|undefined|Shared primary button style used across consent components.|-|Optional|
|
|
451
458
|
|buttonSecondary|SlotStyle \|undefined|Shared secondary button style used across consent components.|-|Optional|
|
package/docs/styling/slots.md
CHANGED
|
@@ -4,7 +4,7 @@ description: Target individual component parts with styles using the slot system
|
|
|
4
4
|
---
|
|
5
5
|
## What are Slots?
|
|
6
6
|
|
|
7
|
-
Slots let you target specific parts of consent components with styles. Each component is built from named slots such as `consentBannerTitle` and `
|
|
7
|
+
Slots let you target specific parts of consent components with styles. Each component is built from named slots such as `consentBannerTitle` and `consentDialogTag`.
|
|
8
8
|
|
|
9
9
|
Use slots after the stock component APIs and design tokens:
|
|
10
10
|
|
|
@@ -88,6 +88,7 @@ Use the typed API reference below for the full slot list and descriptions. It st
|
|
|
88
88
|
|consentBannerDescription|SlotStyle \|undefined|Banner description text element.|-|Optional|
|
|
89
89
|
|consentBannerFooter|SlotStyle \|undefined|Footer container for banner action buttons.|-|Optional|
|
|
90
90
|
|consentBannerFooterSubGroup|SlotStyle \|undefined|Nested button group inside the banner footer.|-|Optional|
|
|
91
|
+
|consentBannerTag|SlotStyle \|undefined|Branding tag rendered above the consent banner card.|-|Optional|
|
|
91
92
|
|consentBannerOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the banner when enabled.|-|Optional|
|
|
92
93
|
|consentDialog|SlotStyle \|undefined|Root wrapper for the consent dialog modal.|-|Optional|
|
|
93
94
|
|consentDialogCard|SlotStyle \|undefined|Main dialog card container.|-|Optional|
|
|
@@ -95,22 +96,25 @@ Use the typed API reference below for the full slot list and descriptions. It st
|
|
|
95
96
|
|consentDialogTitle|SlotStyle \|undefined|Dialog title text element.|-|Optional|
|
|
96
97
|
|consentDialogDescription|SlotStyle \|undefined|Dialog description text element.|-|Optional|
|
|
97
98
|
|consentDialogContent|SlotStyle \|undefined|Dialog content region (typically holds ConsentWidget).|-|Optional|
|
|
98
|
-
|consentDialogFooter|SlotStyle \|undefined|
|
|
99
|
+
|consentDialogFooter|SlotStyle \|undefined|Footer container used by compound dialog layouts.|-|Optional|
|
|
100
|
+
|consentDialogTag|SlotStyle \|undefined|Branding tag rendered below the stock consent dialog card.|-|Optional|
|
|
99
101
|
|consentDialogOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the dialog.|-|Optional|
|
|
100
102
|
|consentWidget|SlotStyle \|undefined|Root wrapper for the consent widget/preferences panel.|-|Optional|
|
|
101
103
|
|consentWidgetAccordion|SlotStyle \|undefined|Accordion region listing consent categories.|-|Optional|
|
|
102
104
|
|consentWidgetFooter|SlotStyle \|undefined|Footer area for widget actions and links.|-|Optional|
|
|
103
|
-
|
|
|
105
|
+
|consentWidgetTag|SlotStyle \|undefined|Branding tag rendered below the standalone consent widget.|-|Optional|
|
|
104
106
|
|frame|SlotStyle \|undefined|Frame wrapper used by blocking placeholders (e.g., iframe blocking).|-|Optional|
|
|
105
107
|
|iabConsentBanner|SlotStyle \|undefined|Root wrapper for the IAB consent banner.|-|Optional|
|
|
106
108
|
|iabConsentBannerCard|SlotStyle \|undefined|Main card container for IAB banner content.|-|Optional|
|
|
107
109
|
|iabConsentBannerHeader|SlotStyle \|undefined|Header region for IAB banner title/description.|-|Optional|
|
|
108
110
|
|iabConsentBannerFooter|SlotStyle \|undefined|Footer container for IAB banner actions.|-|Optional|
|
|
111
|
+
|iabConsentBannerTag|SlotStyle \|undefined|Branding tag rendered above the IAB banner card.|-|Optional|
|
|
109
112
|
|iabConsentBannerOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the IAB banner.|-|Optional|
|
|
110
113
|
|iabConsentDialog|SlotStyle \|undefined|Root wrapper for the IAB consent dialog.|-|Optional|
|
|
111
114
|
|iabConsentDialogCard|SlotStyle \|undefined|Main card container for IAB dialog content.|-|Optional|
|
|
112
115
|
|iabConsentDialogHeader|SlotStyle \|undefined|Header region for IAB dialog title/description.|-|Optional|
|
|
113
116
|
|iabConsentDialogFooter|SlotStyle \|undefined|Footer container for IAB dialog actions.|-|Optional|
|
|
117
|
+
|iabConsentDialogTag|SlotStyle \|undefined|Branding tag rendered below the IAB dialog card.|-|Optional|
|
|
114
118
|
|iabConsentDialogOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the IAB dialog.|-|Optional|
|
|
115
119
|
|buttonPrimary|SlotStyle \|undefined|Shared primary button style used across consent components.|-|Optional|
|
|
116
120
|
|buttonSecondary|SlotStyle \|undefined|Shared secondary button style used across consent components.|-|Optional|
|
package/docs/styling/tokens.md
CHANGED
|
@@ -6,6 +6,8 @@ description: The six base token categories that control colors, typography, spac
|
|
|
6
6
|
|
|
7
7
|
Color tokens define the palette for all consent components. Set `colors` for light mode and `dark` for dark mode overrides.
|
|
8
8
|
|
|
9
|
+
When `textOnPrimary` is omitted, c15t derives it automatically from `primary` to keep text readable on primary-filled surfaces such as stock branding tags and buttons. Set `textOnPrimary` explicitly when you need a specific foreground color.
|
|
10
|
+
|
|
9
11
|
```tsx
|
|
10
12
|
const theme = {
|
|
11
13
|
colors: {
|
|
@@ -45,7 +47,7 @@ const theme = {
|
|
|
45
47
|
|borderHover|string \|undefined|Hover state for bordered elements.|-|Optional|
|
|
46
48
|
|text|string \|undefined|Primary text color for headings and body.|-|Optional|
|
|
47
49
|
|textMuted|string \|undefined|Muted text color for secondary content.|-|Optional|
|
|
48
|
-
|textOnPrimary|string \|undefined|Text color for content on primary background.|-|Optional|
|
|
50
|
+
|textOnPrimary|string \|undefined|Text color for content on primary background. Auto-derived from \`primary\` when omitted.|-|Optional|
|
|
49
51
|
|overlay|string \|undefined|Overlay color for modal backdrops.|-|Optional|
|
|
50
52
|
|switchTrack|string \|undefined|Toggle track color (off state).|-|Optional|
|
|
51
53
|
|switchTrackActive|string \|undefined|Toggle track color (on state).|-|Optional|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c15t/react",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Developer-first CMP for React: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"url": "https://github.com/c15t/c15t.git",
|
|
26
26
|
"directory": "packages/react"
|
|
27
27
|
},
|
|
28
|
-
"license": "
|
|
28
|
+
"license": "Apache-2.0",
|
|
29
29
|
"sideEffects": [
|
|
30
30
|
"**/*.css"
|
|
31
31
|
],
|
|
@@ -164,14 +164,13 @@
|
|
|
164
164
|
"not op_mini all"
|
|
165
165
|
],
|
|
166
166
|
"dependencies": {
|
|
167
|
-
"@c15t/ui": "2.0.0
|
|
168
|
-
"c15t": "2.0.0
|
|
169
|
-
"clsx": "2.1.1"
|
|
167
|
+
"@c15t/ui": "2.0.0",
|
|
168
|
+
"c15t": "2.0.0"
|
|
170
169
|
},
|
|
171
170
|
"devDependencies": {
|
|
172
|
-
"@c15t/backend": "2.0.0
|
|
173
|
-
"@c15t/iab": "2.0.0
|
|
174
|
-
"@c15t/typescript-config": "0.0.1
|
|
171
|
+
"@c15t/backend": "2.0.0",
|
|
172
|
+
"@c15t/iab": "2.0.0",
|
|
173
|
+
"@c15t/typescript-config": "0.0.1",
|
|
175
174
|
"@c15t/vitest-config": "1.0.0",
|
|
176
175
|
"@iabtechlabtcf/core": "^1.5.20",
|
|
177
176
|
"genversion": "3.2.0",
|