@c15t/react 2.0.0-rc.1 → 2.0.0-rc.12

package/docs/styling/tailwind.md

@@ -0,0 +1,113 @@
+---
+title: Tailwind CSS
+description: Use Tailwind CSS utility classes to style consent components via the slot system.
+---
+c15t works with Tailwind CSS out of the box. Use the `slots` theme option to apply Tailwind utility classes to any component part.
+
+## Setup
+
+Import the standard c15t stylesheet once in your app-level CSS entrypoint:
+
+```css
+/* React: src/index.css */
+@import "@c15t/react/styles.css";
+
+/* Next.js: app/globals.css */
+@import "@c15t/nextjs/styles.css";
+```
+
+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.
+
+### 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:
+
+```css title="src/index.css"
+@import "tailwindcss";
+@import "@c15t/react/styles.css";
+```
+
+```css title="app/globals.css"
+@import "tailwindcss";
+@import "@c15t/nextjs/styles.css";
+```
+
+### Tailwind v3
+
+Import the Tailwind 3-compatible c15t stylesheet after `@tailwind components;` and before `@tailwind utilities;`:
+
+```css title="src/index.css"
+@tailwind base;
+@tailwind components;
+@import "@c15t/react/styles.tw3.css";
+@tailwind utilities;
+```
+
+```css title="app/globals.css"
+@tailwind base;
+@tailwind components;
+@import "@c15t/nextjs/styles.tw3.css";
+@tailwind utilities;
+```
+
+## Using Tailwind with Slots
+
+Apply Tailwind classes via the theme's `slots` object:
+
+```tsx
+import { type ReactNode } from 'react';
+import { type Theme, ConsentManagerProvider } from '@c15t/react';
+
+const theme = {
+  slots: {
+    consentBanner: 'fixed bottom-0 inset-x-0 z-50',
+    consentBannerCard: 'mx-auto max-w-2xl rounded-t-2xl bg-white p-6 shadow-2xl',
+    consentBannerTitle: 'text-lg font-semibold text-gray-900',
+    consentBannerDescription: 'mt-2 text-sm text-gray-600',
+    consentBannerFooter: 'mt-4 flex flex-wrap gap-3',
+    buttonPrimary: 'rounded-full bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-indigo-700',
+    buttonSecondary: 'rounded-full border border-gray-300 px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50',
+    toggle: 'data-[state=checked]:bg-indigo-600',
+  },
+} satisfies Theme;
+
+export function ConsentManager({ children }: { children: ReactNode }) {
+  return (
+    <ConsentManagerProvider options={{ theme, mode: 'hosted', backendURL: 'https://your-instance.c15t.dev' }}>
+      {children}
+    </ConsentManagerProvider>
+  );
+}
+```
+
+## Dark Mode with Tailwind
+
+Combine Tailwind's dark mode with c15t's `dark` tokens:
+
+```tsx
+const theme = {
+  colors: {
+    primary: '#6366f1',
+    surface: '#ffffff',
+    text: '#1f2937',
+  },
+  dark: {
+    primary: '#818cf8',
+    surface: '#1f2937',
+    text: '#f9fafb',
+  },
+  slots: {
+    consentBannerCard: 'bg-white dark:bg-gray-900 shadow-lg dark:shadow-gray-900/30',
+    consentBannerTitle: 'text-gray-900 dark:text-gray-100',
+  },
+} satisfies Theme;
+```
+
+## Optional: noStyle Mode
+
+If you want Tailwind to own all layout and visual styling, use `noStyle: true`.
+
+> ℹ️ **Info:**
+> When using noStyle: true with Tailwind, you're responsible for all layout and visual styling. Start with slots first, then switch to noStyle only when you need full control.
+
+For full custom markup (not just styles), see [Headless Mode](../headless).

package/docs/styling/tokens.md

@@ -0,0 +1,216 @@
+---
+title: Design Tokens
+description: The six base token categories that control colors, typography, spacing, radius, shadows, and motion, plus optional dark-mode overrides.
+---
+## Color Tokens
+
+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: {
+    primary: '#6366f1',
+    primaryHover: '#4f46e5',
+    surface: '#ffffff',
+    surfaceHover: '#f9fafb',
+    border: '#e5e7eb',
+    borderHover: '#d1d5db',
+    text: '#1f2937',
+    textMuted: '#6b7280',
+    textOnPrimary: '#ffffff',
+    overlay: 'rgba(0, 0, 0, 0.5)',
+    switchTrack: '#d1d5db',
+    switchTrackActive: '#6366f1',
+    switchThumb: '#ffffff',
+  },
+  dark: {
+    primary: '#818cf8',
+    surface: '#1f2937',
+    text: '#f9fafb',
+    textMuted: '#9ca3af',
+    border: '#374151',
+  },
+} satisfies Theme;
+```
+
+### ColorTokens
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|primary|string \|undefined|Primary brand/accent color for interactive elements.|-|Optional|
+|primaryHover|string \|undefined|Hover/active state for primary elements.|-|Optional|
+|surface|string \|undefined|Main background color for panels and containers.|-|Optional|
+|surfaceHover|string \|undefined|Hover state for surface elements.|-|Optional|
+|border|string \|undefined|Border color for containers and inputs.|-|Optional|
+|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. 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|
+|switchThumb|string \|undefined|Toggle thumb color.|-|Optional|
+
+## Typography Tokens
+
+Control font family, sizes, weights, and line heights.
+
+```tsx
+const theme = {
+  typography: {
+    fontFamily: 'Inter, system-ui, sans-serif',
+    fontSize: { sm: '0.875rem', base: '1rem', lg: '1.125rem' },
+    fontWeight: { normal: 400, medium: 500, semibold: 600 },
+    lineHeight: { tight: '1.25', normal: '1.5', relaxed: '1.75' },
+  },
+} satisfies Theme;
+```
+
+### TypographyTokens
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|fontFamily|string \|undefined|Font family for all components.|-|Optional|
+|fontSize|Object \|undefined|Font sizes for text hierarchy.|-|Optional|
+|fontWeight|Object \|undefined|Font weights for emphasis.|-|Optional|
+|lineHeight|Object \|undefined|Line heights for readability.|-|Optional|
+
+#### `fontSize`
+
+Font sizes for text hierarchy.
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|sm|string \|undefined|@default '0.875rem'|-|Optional|
+|base|string \|undefined|@default '1rem'|-|Optional|
+|lg|string \|undefined|@default '1.125rem'|-|Optional|
+
+#### `fontWeight`
+
+Font weights for emphasis.
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|normal|number \|undefined|@default 400|-|Optional|
+|medium|number \|undefined|@default 500|-|Optional|
+|semibold|number \|undefined|@default 600|-|Optional|
+
+#### `lineHeight`
+
+Line heights for readability.
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|tight|string \|undefined|@default '1.25'|-|Optional|
+|normal|string \|undefined|@default '1.5'|-|Optional|
+|relaxed|string \|undefined|@default '1.75'|-|Optional|
+
+## Spacing Tokens
+
+Five-step scale for internal padding, margins, and gaps.
+
+```tsx
+const theme = {
+  spacing: {
+    xs: '0.25rem',  // 4px
+    sm: '0.5rem',   // 8px
+    md: '1rem',     // 16px
+    lg: '1.5rem',   // 24px
+    xl: '2rem',     // 32px
+  },
+} satisfies Theme;
+```
+
+### SpacingTokens
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|xs|string \|undefined|@default '0.25rem' (4px)|'0.25rem' (4px)|Optional|
+|sm|string \|undefined|@default '0.5rem' (8px)|'0.5rem' (8px)|Optional|
+|md|string \|undefined|@default '1rem' (16px)|'1rem' (16px)|Optional|
+|lg|string \|undefined|@default '1.5rem' (24px)|'1.5rem' (24px)|Optional|
+|xl|string \|undefined|@default '2rem' (32px)|'2rem' (32px)|Optional|
+
+## Radius Tokens
+
+Border radius scale for rounded corners.
+
+```tsx
+const theme = {
+  radius: {
+    sm: '0.25rem',  // 4px
+    md: '0.5rem',   // 8px
+    lg: '0.75rem',  // 12px
+    full: '9999px', // Pill shape
+  },
+} satisfies Theme;
+```
+
+### RadiusTokens
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|sm|string \|undefined|@default '0.25rem' (4px)|'0.25rem' (4px)|Optional|
+|md|string \|undefined|@default '0.5rem' (8px)|'0.5rem' (8px)|Optional|
+|lg|string \|undefined|@default '0.75rem' (12px)|'0.75rem' (12px)|Optional|
+|full|string \|undefined|@default '9999px'|'9999px'|Optional|
+
+## Shadow Tokens
+
+Box shadow scale for depth and elevation.
+
+```tsx
+const theme = {
+  shadows: {
+    sm: '0 1px 2px hsla(0, 0%, 0%, 0.05)',
+    md: '0 4px 12px hsla(0, 0%, 0%, 0.08)',
+    lg: '0 8px 24px hsla(0, 0%, 0%, 0.12)',
+  },
+} satisfies Theme;
+```
+
+### ShadowTokens
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|sm|string \|undefined|@default '0 1px 2px hsla(0, 0%, 0%, 0.05)'|'0 1px 2px hsla(0, 0%, 0%, 0.05)'|Optional|
+|md|string \|undefined|@default '0 4px 12px hsla(0, 0%, 0%, 0.08)'|'0 4px 12px hsla(0, 0%, 0%, 0.08)'|Optional|
+|lg|string \|undefined|@default '0 8px 24px hsla(0, 0%, 0%, 0.12)'|'0 8px 24px hsla(0, 0%, 0%, 0.12)'|Optional|
+
+## Motion Tokens
+
+Animation duration and easing presets.
+
+```tsx
+const theme = {
+  motion: {
+    duration: { fast: '100ms', normal: '200ms', slow: '300ms' },
+    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    easingOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    easingInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+    easingSpring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  },
+} satisfies Theme;
+```
+
+### MotionTokens
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|duration|Object \|undefined|Duration presets for transitions.|-|Optional|
+|easing|string \|undefined|Default CSS easing function for general animation curves.|'cubic-bezier(0.4, 0, 0.2, 1)'|Optional|
+|easingOut|string \|undefined|CSS easing function for enter/exit animations. Use for modals, tooltips, dropdowns, and any element entering or exiting.|'cubic-bezier(0.215, 0.61, 0.355, 1)'|Optional|
+|easingInOut|string \|undefined|CSS easing function for on-screen movement. Use when elements already on screen need to move or morph.|'cubic-bezier(0.645, 0.045, 0.355, 1)'|Optional|
+|easingSpring|string \|undefined|CSS easing function with spring-like overshoot. Use for playful, bouncy animations.|'cubic-bezier(0.34, 1.56, 0.64, 1)'|Optional|
+
+#### `duration`
+
+Duration presets for transitions.
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|fast|string \|undefined|@default '100ms'|-|Optional|
+|normal|string \|undefined|@default '200ms'|-|Optional|
+|slow|string \|undefined|@default '300ms'|-|Optional|

package/docs/troubleshooting.md

@@ -0,0 +1,137 @@
+---
+title: Troubleshooting
+description: Solutions for common issues with @c15t/react — provider errors, missing banners, consent persistence, and more.
+---
+## "Provider not found" Error
+
+**Symptom:** `useConsentManager must be used within a ConsentManagerProvider` error.
+
+**Fix:** Ensure the component calling `useConsentManager()` (or any c15t hook) is rendered inside a `ConsentManagerProvider`:
+
+```tsx
+// Wrong — hook is outside the provider
+function App() {
+  const { consents } = useConsentManager(); // throws
+  return <ConsentManagerProvider options={...}>...</ConsentManagerProvider>;
+}
+
+// Correct — hook is inside the provider
+function App() {
+  return (
+    <ConsentManagerProvider options={...}>
+      <MyComponent /> {/* useConsentManager works here */}
+    </ConsentManagerProvider>
+  );
+}
+```
+
+## Banner Doesn't Show
+
+**Possible causes:**
+
+1. **Opt-out jurisdiction** — In CCPA/opt-out regions, the banner is not shown because tracking is allowed by default. Check `model` from `useConsentManager()` — if it's `'opt-out'`, the banner is intentionally hidden.
+
+2. **Consent already given** — If the user has already made a consent choice, the banner won't reappear. Clear cookies or use `resetConsents()` to test again.
+
+3. **`activeUI` is `'none'`** — Something is explicitly setting `activeUI` to `'none'`. Check the DevTools panel for the current consent state.
+
+4. **Backend not responding** — In `'c15t'` mode, the banner waits for the backend `/init` response. Check the Network tab for failed requests to your `backendURL`.
+
+```tsx
+// Debug: check what the consent manager sees
+const { activeUI, model, isLoadingConsentInfo } = useConsentManager();
+console.log({ activeUI, model, isLoadingConsentInfo });
+```
+
+## Consent Not Persisting
+
+**Symptom:** Consent is lost after page reload.
+
+**Possible causes:**
+
+1. **Incognito/private mode** — Some browsers restrict cookie storage in private browsing.
+
+2. **Cookie settings** — In `'offline'` mode, consent is stored in cookies. Ensure cookies are not being blocked by browser settings or extensions.
+
+3. **Different domains** — Cookies are domain-scoped. If your dev server uses a different domain than production, consent won't carry over.
+
+4. **Backend errors** — In `'c15t'` mode, check that the backend is saving consent successfully. Enable `debug: true` in provider options to see detailed logs.
+
+## Scripts Not Loading
+
+**Symptom:** Third-party scripts configured in the `scripts` option don't load after consent is granted.
+
+**Checklist:**
+
+1. **Wrong category name** — The `category` on the script must match one of the `consentCategories` names. For example, `'measurement'` not `'analytics'`.
+
+2. **Consent condition not met** — Use `has('measurement')` to verify the category is actually consented.
+
+3. **Script error** — Check the browser DevTools Console for script loading errors. The `onError` callback can help debug:
+
+```tsx
+{
+  id: 'analytics',
+  src: 'https://...',
+  category: 'measurement',
+  onError: ({ error }) => console.error('Script failed:', error),
+}
+```
+
+4. **Ad blocker** — Browser extensions may block the script regardless of consent. The `anonymizeId` option (default: `true`) helps avoid pattern-based blocking.
+
+## SSR Hydration Mismatch
+
+**Symptom:** React hydration warnings, consent banner flashes briefly, or consent state differs between server and client.
+
+**Fixes:**
+
+1. **Missing `ssrData`** — Ensure you're passing the SSR data Promise to the provider:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    mode: 'hosted',
+    backendURL: '...',
+    ssrData: fetchSSRData({ backendURL: '...', headers }),
+  }}
+>
+```
+
+2. **Stale cache** — If using a CDN or caching layer, ensure the SSR data is fresh per-request and not shared across users.
+
+3. **Debug with `useSSRStatus`** — Check if SSR data was actually consumed:
+
+```tsx
+const { ssrDataUsed, ssrSkippedReason } = useSSRStatus();
+```
+
+See [Server-Side Utilities](/docs/frameworks/react/server-side) for full SSR setup.
+
+## TypeScript Errors
+
+**Common import issues:**
+
+```tsx
+// Components and hooks — main entry point
+import { ConsentManagerProvider, useConsentManager } from '@c15t/react';
+
+// Server utilities — separate entry point
+import { fetchSSRData } from '@c15t/react/server';
+
+// Headless (hooks only, no components)
+import { useConsentManager } from '@c15t/react/headless';
+```
+
+If you see type errors after updating, try:
+
+```sh
+rm -rf node_modules/.cache
+bun install
+```
+
+## Still Stuck?
+
+* Enable `debug: true` in provider options for verbose console logging
+* Use the [DevTools](/docs/frameworks/react/components/dev-tools) panel to inspect live consent state
+* Check the [GitHub issues](https://github.com/c15t/c15t/issues) for known bugs

package/iab/styles.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@c15t/react",
-	"version": "2.0.0-rc.1",
+	"version": "2.0.0-rc.12",
 	"description": "Developer-first CMP for React: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization",
 	"keywords": [
 		"react",
@@ -25,74 +25,136 @@
 		"url": "https://github.com/c15t/c15t.git",
 		"directory": "packages/react"
 	},
-	"license": "GPL-3.0-only",
-	"sideEffects": false,
+	"license": "Apache-2.0",
+	"sideEffects": [
+		"**/*.css"
+	],
 	"type": "module",
 	"exports": {
+		"./styles.css": "./dist/styles.css",
+		"./styles.tw3.css": "./dist/styles.tw3.css",
+		"./iab/styles.css": "./dist/iab/styles.css",
+		"./iab/styles.tw3.css": "./dist/iab/styles.tw3.css",
+		"./primitives": {
+			"types": "./dist-types/primitives.d.ts",
+			"import": "./dist/primitives.js",
+			"require": "./dist/primitives.cjs"
+		},
+		"./primitives/*": {
+			"types": "./dist-types/primitives/*.d.ts",
+			"import": "./dist/primitives/*.js",
+			"require": "./dist/primitives/*.cjs"
+		},
 		"./server": {
-			"types": "./dist/server/index.d.ts",
+			"types": "./dist-types/server/index.d.ts",
 			"import": "./dist/server/index.js",
 			"require": "./dist/server/index.cjs"
 		},
 		"./headless": {
-			"types": "./dist/headless.d.ts",
+			"types": "./dist-types/headless.d.ts",
 			"import": "./dist/headless.js",
 			"require": "./dist/headless.cjs"
 		},
 		"./preference-center": {
-			"types": "./dist/components/preference-center/index.d.ts",
+			"types": "./dist-types/components/preference-center/index.d.ts",
 			"import": "./dist/components/preference-center/index.js",
 			"require": "./dist/components/preference-center/index.cjs"
 		},
 		"./preference-center-widget": {
-			"types": "./dist/components/preference-center-widget/index.d.ts",
+			"types": "./dist-types/components/preference-center-widget/index.d.ts",
 			"import": "./dist/components/preference-center-widget/index.js",
 			"require": "./dist/components/preference-center-widget/index.cjs"
 		},
 		"./cookie-banner": {
-			"types": "./dist/components/cookie-banner/index.d.ts",
+			"types": "./dist-types/components/cookie-banner/index.d.ts",
 			"import": "./dist/components/cookie-banner/index.js",
 			"require": "./dist/components/cookie-banner/index.cjs"
 		},
+		"./components/consent-banner": {
+			"types": "./dist-types/components/consent-banner/index.d.ts",
+			"import": "./client/components/consent-banner.js",
+			"require": "./dist/components/consent-banner/index.cjs"
+		},
+		"./components/consent-dialog": {
+			"types": "./dist-types/components/consent-dialog/index.d.ts",
+			"import": "./client/components/consent-dialog.js",
+			"require": "./dist/components/consent-dialog/index.cjs"
+		},
+		"./components/consent-dialog-trigger": {
+			"types": "./dist-types/components/consent-dialog-trigger/index.d.ts",
+			"import": "./client/components/consent-dialog-trigger.js",
+			"require": "./dist/components/consent-dialog-trigger/index.cjs"
+		},
+		"./components/consent-dialog-link": {
+			"types": "./dist-types/components/consent-dialog-link/index.d.ts",
+			"import": "./client/components/consent-dialog-link.js",
+			"require": "./dist/components/consent-dialog-link/index.cjs"
+		},
+		"./components/consent-widget": {
+			"types": "./dist-types/components/consent-widget/index.d.ts",
+			"import": "./client/components/consent-widget.js",
+			"require": "./dist/components/consent-widget/index.cjs"
+		},
+		"./components/frame": {
+			"types": "./dist-types/components/frame/index.d.ts",
+			"import": "./client/components/frame.js",
+			"require": "./dist/components/frame/index.cjs"
+		},
+		"./iab": {
+			"types": "./dist-types/iab.d.ts",
+			"import": "./dist/iab.js",
+			"require": "./dist/iab.cjs"
+		},
 		"./hooks": {
-			"types": "./dist/hooks/index.d.ts",
+			"types": "./dist-types/hooks/index.d.ts",
 			"import": "./dist/hooks/index.js",
 			"require": "./dist/hooks/index.cjs"
 		},
 		"./context": {
-			"types": "./dist/context/index.d.ts",
+			"types": "./dist-types/context/index.d.ts",
 			"import": "./dist/context/index.js",
 			"require": "./dist/context/index.cjs"
 		},
 		"./types": {
-			"types": "./dist/types/index.d.ts",
+			"types": "./dist-types/types/index.d.ts",
 			"import": "./dist/types/index.js",
 			"require": "./dist/types/index.cjs"
 		},
 		"./utils": {
-			"types": "./dist/utils/index.d.ts",
+			"types": "./dist-types/utils/index.d.ts",
 			"import": "./dist/utils/index.js",
 			"require": "./dist/utils/index.cjs"
 		},
 		".": {
-			"types": "./dist/index.d.ts",
+			"types": "./dist-types/index.d.ts",
 			"import": "./dist/index.js",
 			"require": "./dist/index.cjs"
 		}
 	},
 	"main": "./dist/index.cjs",
 	"module": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"types": "./dist-types/index.d.ts",
 	"files": [
-		"dist"
+		"dist",
+		"docs",
+		"dist-types",
+		"client",
+		"styles.css",
+		"iab",
+		"src/styles.tw3.css",
+		"src/iab/styles.tw3.css",
+		"!dist/mockServiceWorker.js"
 	],
 	"scripts": {
 		"prebuild": "genversion --esm --semi src/version.ts",
-		"build": "bun prebuild && rslib build",
+		"build": "bun prebuild && rslib build && bun ../../scripts/normalize-dist-types.mjs && bun scripts/generate-distribution-css.ts && bun run clean:dist:test-artifacts && bun ../../scripts/agent-docs/generate-package-docs.ts @c15t/react",
+		"build:agent-docs": "bun ../../scripts/agent-docs/generate-package-docs.ts @c15t/react",
 		"check-types": "bun prebuild && tsc --noEmit",
-		"dev": "bun prebuild && rslib build",
+		"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",
 		"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",
 		"test": "bun prebuild && vitest run",
 		"test:watch": "bun prebuild && vitest"
 	},
@@ -102,19 +164,17 @@
 		"not op_mini all"
 	],
 	"dependencies": {
-		"@c15t/ui": "2.0.0-rc.1",
-		"@radix-ui/react-accordion": "1.2.12",
-		"@radix-ui/react-slot": "1.2.4",
-		"@radix-ui/react-switch": "1.2.6",
-		"c15t": "2.0.0-rc.1",
-		"clsx": "2.1.1"
+		"@c15t/ui": "2.0.0-rc.11",
+		"c15t": "2.0.0-rc.10"
 	},
 	"devDependencies": {
-		"@c15t/backend": "2.0.0-rc.1",
+		"@c15t/backend": "2.0.0-rc.10",
+		"@c15t/iab": "2.0.0-rc.10",
 		"@c15t/typescript-config": "0.0.1-beta.1",
 		"@c15t/vitest-config": "1.0.0",
+		"@iabtechlabtcf/core": "^1.5.20",
 		"genversion": "3.2.0",
-		"msw": "^2.12.7"
+		"msw": "^2.12.14"
 	},
 	"peerDependencies": {
 		"react": "^19.0.0 || ^19.0.0-rc || ^18.0.0 || ^17.0.0 || ^16.8.0",

package/readme.json

@@ -21,6 +21,12 @@
 		"",
 		"```bash\npnpm add @c15t/react\n```",
 		"",
+		"Then add the prebuilt stylesheet to your app-level CSS entrypoint:",
+		"",
+		"```css\n/* src/index.css */\n@import \"@c15t/react/styles.css\";\n```",
+		"",
+		"If you use the prebuilt IAB TCF UI, also import `@c15t/react/iab/styles.css`. It is published separately so non-IAB apps do not ship those component rules.",
+		"",
 		"To manually install, follow the guide in our [docs – manual setup](https://c15t.com/docs/frameworks/react/quickstart#manual-setup)."
 	],
 	"usage": [

package/src/iab/styles.css

@@ -0,0 +1,11 @@
+/**
+ * @c15t/react — IAB TCF component styles.
+ *
+ * Add this stylesheet to the same global CSS entrypoint as your base c15t styles
+ * when using IAB consent components. Do not import either stylesheet from JS/TSX.
+ *
+ * Usage (src/index.css):
+ *   @import "@c15t/react/styles.css";
+ *   @import "@c15t/react/iab/styles.css";
+ */
+@import "@c15t/ui/iab/styles.css";