@c15t/react 2.0.0-rc.6 → 2.0.0-rc.8

package/docs/styling/slots.md

@@ -4,7 +4,19 @@ 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" (e.g., `consentBannerTitle`, `consentDialogFooter`) that you can style individually.
+Slots let you target specific parts of consent components with styles. Each component is built from named slots such as `consentBannerTitle` and `consentDialogFooter`.
+
+Use slots after the stock component APIs and design tokens:
+
+* If the change is semantic, prefer tokens first. For example, the stock banner footer background comes from `theme.colors.surfaceHover`.
+* If the component part is correct but you need a local tweak, use a slot.
+
+Common banner slot choices:
+
+* `consentBannerCard` for card radius, shadow, width, and local background treatment
+* `consentBannerFooter` for spacing, borders, and local footer styling
+* `consentBannerTitle` for title typography
+* `buttonPrimary` and `buttonSecondary` for shared button classes
 
 ## Using Slots
 
@@ -13,8 +25,8 @@ Pass slot styles in the theme's `slots` object:
 ```tsx
 const theme = {
   slots: {
-    // String value = className
-    consentBannerTitle: 'text-xl font-bold text-gray-900',
+    consentBannerFooter: 'border-t border-black/10 px-6',
+    consentBannerTitle: 'text-xl font-bold tracking-tight',
 
     // Object value = className + inline styles
     consentBannerCard: {
@@ -34,13 +46,31 @@ Each slot accepts either a `string` (treated as className) or a `SlotStyle` obje
 consentBannerTitle: 'my-custom-class'
 
 // Object: className + style + noStyle
-consentBannerTitle: {
-  className: 'my-custom-class',
-  style: { color: 'red', fontSize: '1.5rem' },
-  noStyle: false, // Set true to remove default styles for this slot
+consentBannerFooter: {
+  className: 'border-t border-black/10',
+  style: { paddingBlock: '1rem' },
+  noStyle: false, // Set true only when you want to remove this slot's default styling
 }
 ```
 
+`noStyle` on a slot is an advanced escape hatch. Start with className and style overrides first.
+
+## Example: Style the stock banner without changing markup
+
+```tsx
+const theme = {
+  colors: {
+    surface: '#fffdf8',
+    surfaceHover: '#f6f3ee',
+  },
+  slots: {
+    consentBannerCard: 'rounded-[28px] shadow-xl',
+    consentBannerFooter: 'border-t border-black/10 px-6',
+    consentBannerTitle: 'tracking-tight',
+  },
+} satisfies Theme;
+```
+
 ## Available Slots
 
 Use the typed API reference below for the full slot list and descriptions. It stays in sync with the actual component slot surface.

package/docs/styling/tailwind.md

@@ -6,50 +6,48 @@ c15t works with Tailwind CSS out of the box. Use the `slots` theme option to app
 
 ## Setup
 
-Import the standard c15t stylesheet once at the root of your app:
+Import the standard c15t stylesheet once in your app-level CSS entrypoint:
 
-```tsx
-// React
-import '@c15t/react/styles.css';
+```css
+/* React: src/index.css */
+@import "@c15t/react/styles.css";
 
-// Next.js
-import '@c15t/nextjs/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. Declare c15t's layer order once in your global CSS so utilities stay last:
+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
-@layer theme, base, components, c15t, utilities;
+```css title="src/index.css"
 @import "tailwindcss";
+@import "@c15t/react/styles.css";
 ```
 
-### Tailwind v3
-
-Keep Tailwind's directives in your app stylesheet, but wrap `@tailwind base` in a native `base` layer so c15t's `@layer c15t` rules can sit above Preflight:
-
 ```css title="app/globals.css"
-@layer base, components, c15t;
+@import "tailwindcss";
+@import "@c15t/nextjs/styles.css";
+```
 
-@layer base {
-  @tailwind base;
-}
+### 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;
 ```
 
-Then add c15t's component paths to your `content` array:
-
-```js title="tailwind.config.js"
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@c15t/react/**/*.{js,mjs}',
-    './node_modules/@c15t/nextjs/**/*.{js,mjs}',
-  ],
-};
+```css title="app/globals.css"
+@tailwind base;
+@tailwind components;
+@import "@c15t/nextjs/styles.tw3.css";
+@tailwind utilities;
 ```
 
 ## Using Tailwind with Slots

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.6",
+	"version": "2.0.0-rc.8",
 	"description": "Developer-first CMP for React: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization",
 	"keywords": [
 		"react",
@@ -32,14 +32,16 @@
 	"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/primitives.d.ts",
+			"types": "./dist-types/primitives.d.ts",
 			"import": "./dist/primitives.js",
 			"require": "./dist/primitives.cjs"
 		},
 		"./primitives/*": {
-			"types": "./dist/primitives/*.d.ts",
+			"types": "./dist-types/primitives/*.d.ts",
 			"import": "./dist/primitives/*.js",
 			"require": "./dist/primitives/*.cjs"
 		},
@@ -137,15 +139,19 @@
 		"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 && bun run clean:dist:test-artifacts && bun ../../scripts/agent-docs/generate-package-docs.ts @c15t/react",
+		"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",
 		"clean:dist:test-artifacts": "bun --eval \"import { rmSync } from 'node:fs'; rmSync('dist/mockServiceWorker.js', { force: true });\"",
-		"dev": "bun prebuild && rslib build",
+		"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",
@@ -158,13 +164,13 @@
 		"not op_mini all"
 	],
 	"dependencies": {
-		"@c15t/ui": "2.0.0-rc.6",
-		"c15t": "2.0.0-rc.6",
+		"@c15t/ui": "2.0.0-rc.8",
+		"c15t": "2.0.0-rc.8",
 		"clsx": "2.1.1"
 	},
 	"devDependencies": {
-		"@c15t/backend": "2.0.0-rc.6",
-		"@c15t/iab": "2.0.0-rc.6",
+		"@c15t/backend": "2.0.0-rc.8",
+		"@c15t/iab": "2.0.0-rc.8",
 		"@c15t/typescript-config": "0.0.1-beta.1",
 		"@c15t/vitest-config": "1.0.0",
 		"@iabtechlabtcf/core": "^1.5.20",

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";

package/src/iab/styles.tw3.css

@@ -0,0 +1,14 @@
+/**
+ * @c15t/react/iab — Tailwind 3-compatible IAB component styles.
+ *
+ * Add this stylesheet to the same global CSS entrypoint as your base c15t styles.
+ * Do not import either stylesheet from JS/TSX files.
+ *
+ * Usage (src/index.css):
+ *   @tailwind base;
+ *   @tailwind components;
+ *   @import "@c15t/react/styles.tw3.css";
+ *   @import "@c15t/react/iab/styles.tw3.css";
+ *   @tailwind utilities;
+ */
+@import "@c15t/ui/iab/styles.tw3.css";

package/src/styles.css

@@ -0,0 +1,10 @@
+/**
+ * @c15t/react — Non-IAB prebuilt component styles.
+ *
+ * Import this stylesheet once from your app-level CSS entrypoint
+ * when using prebuilt (styled) consent components.
+ *
+ * Usage (src/index.css):
+ *   @import "@c15t/react/styles.css";
+ */
+@import "@c15t/ui/styles.css";

package/src/styles.tw3.css

@@ -0,0 +1,13 @@
+/**
+ * @c15t/react — Tailwind 3-compatible prebuilt component styles.
+ *
+ * Import this stylesheet in the same global CSS entrypoint as Tailwind 3,
+ * after `@tailwind components;` and before `@tailwind utilities;`.
+ *
+ * Usage (src/index.css):
+ *   @tailwind base;
+ *   @tailwind components;
+ *   @import "@c15t/react/styles.tw3.css";
+ *   @tailwind utilities;
+ */
+@import "@c15t/ui/styles.tw3.css";

package/styles.css

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

package/dist/components/shared/libs/policy-actions.cjs

@@ -1 +0,0 @@
-"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,o)=>{for(var r in o)__webpack_require__.o(o,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:o[r]})},__webpack_require__.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{flattenPolicyActionGroups:()=>flattenPolicyActionGroups,hasPolicyHints:()=>hasPolicyHints,resolvePolicyActionGroups:()=>resolvePolicyActionGroups,resolvePolicyAllowedActions:()=>resolvePolicyAllowedActions,resolvePolicyDirection:()=>resolvePolicyDirection,resolvePolicyOrderedActions:()=>resolvePolicyOrderedActions,resolvePolicyPrimaryActions:()=>resolvePolicyPrimaryActions,resolvePolicyUiProfile:()=>resolvePolicyUiProfile,shouldFillPolicyActions:()=>shouldFillPolicyActions});const DEFAULT_POLICY_ACTIONS=["reject","accept","customize"];function dedupeActions(e){return e&&0!==e.length?[...new Set(e)]:[]}function resolvePolicyAllowedActions(e){let o=dedupeActions(e.allowedActions);return o.length>0?o:[...DEFAULT_POLICY_ACTIONS]}function flattenPolicyActionGroups(e){return e&&0!==e.length?e.flatMap(e=>Array.isArray(e)?e:[e]):[]}function resolvePolicyActionGroups(e){let o=dedupeActions(e.allowedActions);if(0===o.length)return[];if(!e.layout||0===e.layout.length)return[[...o]];let r=new Set(o),i=[],t=new Set;for(let o of e.layout){let e=dedupeActions(Array.isArray(o)?o:[o]).filter(e=>!(!r.has(e)||t.has(e))&&(t.add(e),!0));e.length>0&&i.push(e)}return i.length>0?i:[[...o]]}function resolvePolicyOrderedActions(e){return flattenPolicyActionGroups(resolvePolicyActionGroups({allowedActions:e.allowedActions,layout:e.layout}))}function resolvePolicyPrimaryActions(e){let o=e.orderedActions.includes("customize")?["customize"]:[];if(!e.primaryActions||0===e.primaryActions.length)return o;let r=e.primaryActions.filter(o=>e.orderedActions.includes(o));return r.length>0?r:o}function resolvePolicyDirection(e){return"column"===e?"column":"row"}function resolvePolicyUiProfile(e){return"balanced"===e||"compact"===e||"strict"===e?e:"compact"}function shouldFillPolicyActions(e){let o=resolvePolicyUiProfile(e.uiProfile),r=new Set(e.actionGroups.flat()).size,i=e.actionGroups.length>1,t="column"===e.direction;return"strict"===o||"balanced"===o&&(r<=2||3===r&&(i||t))}function hasPolicyHints(e){return!!e&&Object.values(e).some(e=>Array.isArray(e)?e.length>0:void 0!==e)}for(var __rspack_i in exports.flattenPolicyActionGroups=__webpack_exports__.flattenPolicyActionGroups,exports.hasPolicyHints=__webpack_exports__.hasPolicyHints,exports.resolvePolicyActionGroups=__webpack_exports__.resolvePolicyActionGroups,exports.resolvePolicyAllowedActions=__webpack_exports__.resolvePolicyAllowedActions,exports.resolvePolicyDirection=__webpack_exports__.resolvePolicyDirection,exports.resolvePolicyOrderedActions=__webpack_exports__.resolvePolicyOrderedActions,exports.resolvePolicyPrimaryActions=__webpack_exports__.resolvePolicyPrimaryActions,exports.resolvePolicyUiProfile=__webpack_exports__.resolvePolicyUiProfile,exports.shouldFillPolicyActions=__webpack_exports__.shouldFillPolicyActions,__webpack_exports__)-1===["flattenPolicyActionGroups","hasPolicyHints","resolvePolicyActionGroups","resolvePolicyAllowedActions","resolvePolicyDirection","resolvePolicyOrderedActions","resolvePolicyPrimaryActions","resolvePolicyUiProfile","shouldFillPolicyActions"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/components/shared/libs/policy-actions.js

@@ -1 +0,0 @@
-let t=["reject","accept","customize"];function e(t){return t&&0!==t.length?[...new Set(t)]:[]}function o(o){let n=e(o.allowedActions);return n.length>0?n:[...t]}function n(t){return t&&0!==t.length?t.flatMap(t=>Array.isArray(t)?t:[t]):[]}function r(t){let o=e(t.allowedActions);if(0===o.length)return[];if(!t.layout||0===t.layout.length)return[[...o]];let n=new Set(o),r=[],l=new Set;for(let o of t.layout){let t=e(Array.isArray(o)?o:[o]).filter(t=>!(!n.has(t)||l.has(t))&&(l.add(t),!0));t.length>0&&r.push(t)}return r.length>0?r:[[...o]]}function l(t){return n(r({allowedActions:t.allowedActions,layout:t.layout}))}function i(t){let e=t.orderedActions.includes("customize")?["customize"]:[];if(!t.primaryActions||0===t.primaryActions.length)return e;let o=t.primaryActions.filter(e=>t.orderedActions.includes(e));return o.length>0?o:e}function c(t){return"column"===t?"column":"row"}function u(t){return"balanced"===t||"compact"===t||"strict"===t?t:"compact"}function s(t){let e=u(t.uiProfile),o=new Set(t.actionGroups.flat()).size,n=t.actionGroups.length>1,r="column"===t.direction;return"strict"===e||"balanced"===e&&(o<=2||3===o&&(n||r))}function a(t){return!!t&&Object.values(t).some(t=>Array.isArray(t)?t.length>0:void 0!==t)}export{n as flattenPolicyActionGroups,a as hasPolicyHints,r as resolvePolicyActionGroups,o as resolvePolicyAllowedActions,c as resolvePolicyDirection,l as resolvePolicyOrderedActions,i as resolvePolicyPrimaryActions,u as resolvePolicyUiProfile,s as shouldFillPolicyActions};

package/dist-types/components/shared/libs/policy-actions.d.ts

@@ -1,26 +0,0 @@
-import type { PolicyUiAction, PolicyUiActionDirection, PolicyUiActionGroup, PolicyUiProfile, PolicyUiSurfaceConfig } from '../../../../../core/dist-types/index.d.ts';
-export type { PolicyUiAction, PolicyUiActionDirection, PolicyUiActionGroup, PolicyUiProfile, PolicyUiSurfaceConfig, };
-export declare function resolvePolicyAllowedActions(params: {
-    allowedActions?: PolicyUiAction[];
-}): PolicyUiAction[];
-export declare function flattenPolicyActionGroups(layout?: PolicyUiActionGroup[]): PolicyUiAction[];
-export declare function resolvePolicyActionGroups(params: {
-    allowedActions: PolicyUiAction[];
-    layout?: PolicyUiActionGroup[];
-}): PolicyUiAction[][];
-export declare function resolvePolicyOrderedActions(params: {
-    allowedActions: PolicyUiAction[];
-    layout?: PolicyUiActionGroup[];
-}): PolicyUiAction[];
-export declare function resolvePolicyPrimaryActions(params: {
-    orderedActions: PolicyUiAction[];
-    primaryActions?: PolicyUiAction[];
-}): PolicyUiAction[];
-export declare function resolvePolicyDirection(direction?: PolicyUiActionDirection): PolicyUiActionDirection;
-export declare function resolvePolicyUiProfile(profile?: PolicyUiProfile): PolicyUiProfile;
-export declare function shouldFillPolicyActions(params: {
-    uiProfile?: PolicyUiProfile;
-    actionGroups: PolicyUiAction[][];
-    direction?: PolicyUiActionDirection;
-}): boolean;
-export declare function hasPolicyHints(surface?: PolicyUiSurfaceConfig): boolean;