@c15t/react 2.0.0-rc.9 → 2.0.2

package/docs/styling/overview.md

@@ -102,6 +102,7 @@ Use tokens first when the change is semantic:
 * Banner card background -> `theme.colors.surface`
 * Banner footer background -> `theme.colors.surfaceHover`
 * Shared copy color -> `theme.colors.text` and `theme.colors.textMuted`
+* Primary-filled surfaces such as stock branding tags and filled actions -> `theme.colors.primary` with `theme.colors.textOnPrimary` as the matching foreground override
 
 ```tsx
 options={{
@@ -114,6 +115,8 @@ options={{
 }}
 ```
 
+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.
+
 ### 3. Component slots
 
 Target specific component parts via the `slots` object:
@@ -317,7 +320,7 @@ Color palette for light mode.
 |borderHover|string \|undefined|Hover state for bordered elements.|-|Optional|
 |text|string \|undefined|Primary text color for headings and body.|-|Optional|
 |textMuted|string \|undefined|Muted text color for secondary content.|-|Optional|
-|textOnPrimary|string \|undefined|Text color for content on primary background.|-|Optional|
+|textOnPrimary|string \|undefined|Text color for content on primary background. Auto-derived from \`primary\` when omitted.|-|Optional|
 |overlay|string \|undefined|Overlay color for modal backdrops.|-|Optional|
 |switchTrack|string \|undefined|Toggle track color (off state).|-|Optional|
 |switchTrackActive|string \|undefined|Toggle track color (on state).|-|Optional|
@@ -337,7 +340,7 @@ Dark mode color overrides.
 |borderHover|string \|undefined|Hover state for bordered elements.|-|Optional|
 |text|string \|undefined|Primary text color for headings and body.|-|Optional|
 |textMuted|string \|undefined|Muted text color for secondary content.|-|Optional|
-|textOnPrimary|string \|undefined|Text color for content on primary background.|-|Optional|
+|textOnPrimary|string \|undefined|Text color for content on primary background. Auto-derived from \`primary\` when omitted.|-|Optional|
 |overlay|string \|undefined|Overlay color for modal backdrops.|-|Optional|
 |switchTrack|string \|undefined|Toggle track color (off state).|-|Optional|
 |switchTrackActive|string \|undefined|Toggle track color (on state).|-|Optional|
@@ -423,6 +426,7 @@ Component-specific style overrides.
 |consentBannerDescription|SlotStyle \|undefined|Banner description text element.|-|Optional|
 |consentBannerFooter|SlotStyle \|undefined|Footer container for banner action buttons.|-|Optional|
 |consentBannerFooterSubGroup|SlotStyle \|undefined|Nested button group inside the banner footer.|-|Optional|
+|consentBannerTag|SlotStyle \|undefined|Branding tag rendered above the consent banner card.|-|Optional|
 |consentBannerOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the banner when enabled.|-|Optional|
 |consentDialog|SlotStyle \|undefined|Root wrapper for the consent dialog modal.|-|Optional|
 |consentDialogCard|SlotStyle \|undefined|Main dialog card container.|-|Optional|
@@ -430,22 +434,25 @@ Component-specific style overrides.
 |consentDialogTitle|SlotStyle \|undefined|Dialog title text element.|-|Optional|
 |consentDialogDescription|SlotStyle \|undefined|Dialog description text element.|-|Optional|
 |consentDialogContent|SlotStyle \|undefined|Dialog content region (typically holds ConsentWidget).|-|Optional|
-|consentDialogFooter|SlotStyle \|undefined|Dialog footer container with actions/branding.|-|Optional|
+|consentDialogFooter|SlotStyle \|undefined|Footer container used by compound dialog layouts.|-|Optional|
+|consentDialogTag|SlotStyle \|undefined|Branding tag rendered below the stock consent dialog card.|-|Optional|
 |consentDialogOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the dialog.|-|Optional|
 |consentWidget|SlotStyle \|undefined|Root wrapper for the consent widget/preferences panel.|-|Optional|
 |consentWidgetAccordion|SlotStyle \|undefined|Accordion region listing consent categories.|-|Optional|
 |consentWidgetFooter|SlotStyle \|undefined|Footer area for widget actions and links.|-|Optional|
-|consentWidgetBranding|SlotStyle \|undefined|Branding element rendered in the widget footer.|-|Optional|
+|consentWidgetTag|SlotStyle \|undefined|Branding tag rendered below the standalone consent widget.|-|Optional|
 |frame|SlotStyle \|undefined|Frame wrapper used by blocking placeholders (e.g., iframe blocking).|-|Optional|
 |iabConsentBanner|SlotStyle \|undefined|Root wrapper for the IAB consent banner.|-|Optional|
 |iabConsentBannerCard|SlotStyle \|undefined|Main card container for IAB banner content.|-|Optional|
 |iabConsentBannerHeader|SlotStyle \|undefined|Header region for IAB banner title/description.|-|Optional|
 |iabConsentBannerFooter|SlotStyle \|undefined|Footer container for IAB banner actions.|-|Optional|
+|iabConsentBannerTag|SlotStyle \|undefined|Branding tag rendered above the IAB banner card.|-|Optional|
 |iabConsentBannerOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the IAB banner.|-|Optional|
 |iabConsentDialog|SlotStyle \|undefined|Root wrapper for the IAB consent dialog.|-|Optional|
 |iabConsentDialogCard|SlotStyle \|undefined|Main card container for IAB dialog content.|-|Optional|
 |iabConsentDialogHeader|SlotStyle \|undefined|Header region for IAB dialog title/description.|-|Optional|
 |iabConsentDialogFooter|SlotStyle \|undefined|Footer container for IAB dialog actions.|-|Optional|
+|iabConsentDialogTag|SlotStyle \|undefined|Branding tag rendered below the IAB dialog card.|-|Optional|
 |iabConsentDialogOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the IAB dialog.|-|Optional|
 |buttonPrimary|SlotStyle \|undefined|Shared primary button style used across consent components.|-|Optional|
 |buttonSecondary|SlotStyle \|undefined|Shared secondary button style used across consent components.|-|Optional|

package/docs/styling/slots.md

@@ -4,7 +4,7 @@ description: Target individual component parts with styles using the slot system
 ---
 ## What are Slots?
 
-Slots let you target specific parts of consent components with styles. Each component is built from named slots such as `consentBannerTitle` and `consentDialogFooter`.
+Slots let you target specific parts of consent components with styles. Each component is built from named slots such as `consentBannerTitle` and `consentDialogTag`.
 
 Use slots after the stock component APIs and design tokens:
 
@@ -88,6 +88,7 @@ Use the typed API reference below for the full slot list and descriptions. It st
 |consentBannerDescription|SlotStyle \|undefined|Banner description text element.|-|Optional|
 |consentBannerFooter|SlotStyle \|undefined|Footer container for banner action buttons.|-|Optional|
 |consentBannerFooterSubGroup|SlotStyle \|undefined|Nested button group inside the banner footer.|-|Optional|
+|consentBannerTag|SlotStyle \|undefined|Branding tag rendered above the consent banner card.|-|Optional|
 |consentBannerOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the banner when enabled.|-|Optional|
 |consentDialog|SlotStyle \|undefined|Root wrapper for the consent dialog modal.|-|Optional|
 |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
 |consentDialogTitle|SlotStyle \|undefined|Dialog title text element.|-|Optional|
 |consentDialogDescription|SlotStyle \|undefined|Dialog description text element.|-|Optional|
 |consentDialogContent|SlotStyle \|undefined|Dialog content region (typically holds ConsentWidget).|-|Optional|
-|consentDialogFooter|SlotStyle \|undefined|Dialog footer container with actions/branding.|-|Optional|
+|consentDialogFooter|SlotStyle \|undefined|Footer container used by compound dialog layouts.|-|Optional|
+|consentDialogTag|SlotStyle \|undefined|Branding tag rendered below the stock consent dialog card.|-|Optional|
 |consentDialogOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the dialog.|-|Optional|
 |consentWidget|SlotStyle \|undefined|Root wrapper for the consent widget/preferences panel.|-|Optional|
 |consentWidgetAccordion|SlotStyle \|undefined|Accordion region listing consent categories.|-|Optional|
 |consentWidgetFooter|SlotStyle \|undefined|Footer area for widget actions and links.|-|Optional|
-|consentWidgetBranding|SlotStyle \|undefined|Branding element rendered in the widget footer.|-|Optional|
+|consentWidgetTag|SlotStyle \|undefined|Branding tag rendered below the standalone consent widget.|-|Optional|
 |frame|SlotStyle \|undefined|Frame wrapper used by blocking placeholders (e.g., iframe blocking).|-|Optional|
 |iabConsentBanner|SlotStyle \|undefined|Root wrapper for the IAB consent banner.|-|Optional|
 |iabConsentBannerCard|SlotStyle \|undefined|Main card container for IAB banner content.|-|Optional|
 |iabConsentBannerHeader|SlotStyle \|undefined|Header region for IAB banner title/description.|-|Optional|
 |iabConsentBannerFooter|SlotStyle \|undefined|Footer container for IAB banner actions.|-|Optional|
+|iabConsentBannerTag|SlotStyle \|undefined|Branding tag rendered above the IAB banner card.|-|Optional|
 |iabConsentBannerOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the IAB banner.|-|Optional|
 |iabConsentDialog|SlotStyle \|undefined|Root wrapper for the IAB consent dialog.|-|Optional|
 |iabConsentDialogCard|SlotStyle \|undefined|Main card container for IAB dialog content.|-|Optional|
 |iabConsentDialogHeader|SlotStyle \|undefined|Header region for IAB dialog title/description.|-|Optional|
 |iabConsentDialogFooter|SlotStyle \|undefined|Footer container for IAB dialog actions.|-|Optional|
+|iabConsentDialogTag|SlotStyle \|undefined|Branding tag rendered below the IAB dialog card.|-|Optional|
 |iabConsentDialogOverlay|SlotStyle \|undefined|Backdrop overlay rendered behind the IAB dialog.|-|Optional|
 |buttonPrimary|SlotStyle \|undefined|Shared primary button style used across consent components.|-|Optional|
 |buttonSecondary|SlotStyle \|undefined|Shared secondary button style used across consent components.|-|Optional|

package/docs/styling/tailwind.md

@@ -18,17 +18,21 @@ Import the standard c15t stylesheet once in your app-level CSS entrypoint:
 
 Keeping the c15t stylesheet in your global CSS entrypoint makes layer and cascade order explicit. JS/TSX side-effect imports can load in a different order across framework and Tailwind tooling, which makes style regressions harder to debug.
 
+With Tailwind v4, keep c15t at the end of the top-level `@import` block so Fumadocs, `tw-animate-css`, and other preset imports do not override c15t theme tokens.
+
 ### Tailwind v4
 
-Tailwind v4 automatically scans your source files. Import Tailwind normally, then place the c15t stylesheet immediately after it. c15t component styles join Tailwind's `components` layer automatically, so no extra c15t-specific layer declaration is needed:
+Tailwind v4 automatically scans your source files. Import Tailwind normally, then keep the c15t stylesheet last in the top-level `@import` block so Fumadocs, `tw-animate-css`, or other preset styles load first. c15t component styles join Tailwind's `components` layer automatically, so no extra c15t-specific layer declaration is needed:
 
 ```css title="src/index.css"
 @import "tailwindcss";
+@import "tw-animate-css";
 @import "@c15t/react/styles.css";
 ```
 
 ```css title="app/globals.css"
 @import "tailwindcss";
+@import "tw-animate-css";
 @import "@c15t/nextjs/styles.css";
 ```
 

package/docs/styling/tokens.md

@@ -6,6 +6,8 @@ description: The six base token categories that control colors, typography, spac
 
 Color tokens define the palette for all consent components. Set `colors` for light mode and `dark` for dark mode overrides.
 
+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.
+
 ```tsx
 const theme = {
   colors: {
@@ -45,7 +47,7 @@ const theme = {
 |borderHover|string \|undefined|Hover state for bordered elements.|-|Optional|
 |text|string \|undefined|Primary text color for headings and body.|-|Optional|
 |textMuted|string \|undefined|Muted text color for secondary content.|-|Optional|
-|textOnPrimary|string \|undefined|Text color for content on primary background.|-|Optional|
+|textOnPrimary|string \|undefined|Text color for content on primary background. Auto-derived from \`primary\` when omitted.|-|Optional|
 |overlay|string \|undefined|Overlay color for modal backdrops.|-|Optional|
 |switchTrack|string \|undefined|Toggle track color (off state).|-|Optional|
 |switchTrackActive|string \|undefined|Toggle track color (on state).|-|Optional|

package/iab/styles.tw3.css

@@ -0,0 +1 @@
+@import "../dist/iab/styles.tw3.css";

package/package.json

@@ -1,31 +1,44 @@
 {
 	"name": "@c15t/react",
-	"version": "2.0.0-rc.9",
-	"description": "Developer-first CMP for React: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization",
+	"version": "2.0.2",
+	"description": "Headless cookie banner, consent manager & preference center for React. RSC-compatible, GDPR/CCPA/LGPD/TCF, TypeScript-first.",
 	"keywords": [
 		"react",
+		"react-consent",
+		"react-cookie-banner",
+		"react-cookie-consent",
 		"consent",
 		"privacy",
 		"gdpr",
 		"ccpa",
 		"lgpd",
+		"tcf",
+		"iab",
+		"cmp",
 		"headless",
 		"typescript",
 		"cookie-banner",
+		"cookie-consent",
 		"consent-management-platform",
-		"cmp",
+		"consent-management",
 		"consent-banner",
-		"user-consent",
-		"privacy-compliance",
-		"web-privacy"
+		"consent-manager-react",
+		"preference-center",
+		"react-server-components",
+		"rsc",
+		"use-client",
+		"tracking-consent"
 	],
 	"homepage": "https://c15t.com/docs/frameworks/react/quickstart",
+	"bugs": {
+		"url": "https://github.com/c15t/c15t/issues"
+	},
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/c15t/c15t.git",
 		"directory": "packages/react"
 	},
-	"license": "GPL-3.0-only",
+	"license": "Apache-2.0",
 	"sideEffects": [
 		"**/*.css"
 	],
@@ -140,6 +153,7 @@
 		"dist-types",
 		"client",
 		"styles.css",
+		"styles.tw3.css",
 		"iab",
 		"src/styles.tw3.css",
 		"src/iab/styles.tw3.css",
@@ -151,10 +165,10 @@
 		"build:agent-docs": "bun ../../scripts/agent-docs/generate-package-docs.ts @c15t/react",
 		"check-types": "bun prebuild && tsc --noEmit",
 		"clean:dist:test-artifacts": "bun --eval \"import { rmSync } from 'node:fs'; rmSync('dist/mockServiceWorker.js', { force: true });\"",
-		"dev": "bun prebuild && rslib build && bun ../../scripts/normalize-dist-types.mjs && bun scripts/generate-distribution-css.ts",
+		"dev": "sh -c 'bun prebuild && rslib build --no-dts --no-clean && bun scripts/generate-distribution-css.ts && rslib build --watch --no-dts --no-clean'",
 		"fmt": "bun biome format --write . && bun biome check --formatter-enabled=false --linter-enabled=false --write",
 		"lint": "bun biome lint ./src",
-		"prepack": "cd ../.. && bunx turbo run build --filter=@c15t/react",
+		"prepack": "bun run build",
 		"test": "bun prebuild && vitest run",
 		"test:watch": "bun prebuild && vitest"
 	},
@@ -164,14 +178,13 @@
 		"not op_mini all"
 	],
 	"dependencies": {
-		"@c15t/ui": "2.0.0-rc.9",
-		"c15t": "2.0.0-rc.8",
-		"clsx": "2.1.1"
+		"@c15t/ui": "2.0.1",
+		"c15t": "2.0.0"
 	},
 	"devDependencies": {
-		"@c15t/backend": "2.0.0-rc.8",
-		"@c15t/iab": "2.0.0-rc.8",
-		"@c15t/typescript-config": "0.0.1-beta.1",
+		"@c15t/backend": "2.0.2",
+		"@c15t/iab": "2.0.0",
+		"@c15t/typescript-config": "0.0.1",
 		"@c15t/vitest-config": "1.0.0",
 		"@iabtechlabtcf/core": "^1.5.20",
 		"genversion": "3.2.0",

package/readme.json

@@ -1,6 +1,6 @@
 {
 	"title": "@c15t/react: React Consent Components",
-	"description": "Developer-first CMP for React: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization",
+	"description": "Headless cookie banner, consent manager & preference center for React. RSC-compatible, GDPR/CCPA/LGPD/TCF, TypeScript-first.",
 	"features": [
 		"Works with React 19, 18, 17, and 16.8",
 		"Full 'use client' support for React Server Components",
@@ -15,7 +15,7 @@
 	"prerequisites": [
 		"React 16.8 or later",
 		"Node.js 18.17.0 or later",
-		"A hosted [c15t instance](https://consent.io) (free sign-up) or [self-hosted deployment](https://c15t.com/docs/self-host/v2)"
+		"A hosted [c15t instance](https://inth.com) (free sign-up) or [self-hosted deployment](https://c15t.com/docs/self-host/v2)"
 	],
 	"manualInstallation": [
 		"",
@@ -31,11 +31,11 @@
 	],
 	"usage": [
 		"Import `ConsentManagerProvider` in your app's root component",
-		"Add `CookieBanner` and `PreferenceCenter` components",
+		"Add `ConsentBanner` and `ConsentDialog` components",
 		"Customise styling and behaviour to fit your app",
 		"For full implementation details, see the [React quickstart docs](https://c15t.com/docs/frameworks/react/quickstart)",
 
-		"```tsx\n// App.tsx\nimport { ConsentManagerProvider, CookieBanner } from '@c15t/react'\n\nfunction App() {\n  return (\n    <ConsentManagerProvider>\n      <YourApp />\n      <CookieBanner />\n    </ConsentManagerProvider>\n  )\n}\n```"
+		"```tsx\n// App.tsx\nimport {\n  ConsentManagerProvider,\n  ConsentBanner,\n  ConsentDialog,\n} from '@c15t/react'\n\nfunction App() {\n  return (\n    <ConsentManagerProvider>\n      <YourApp />\n      <ConsentBanner />\n      <ConsentDialog />\n    </ConsentManagerProvider>\n  )\n}\n```"
 	],
 	"docsLink": "https://c15t.com/docs/frameworks/react/quickstart",
 	"quickStartLink": "https://c15t.com/docs/frameworks/react/quickstart",

package/styles.tw3.css

@@ -0,0 +1 @@
+@import "./dist/styles.tw3.css";