@c15t/react 2.2.0 → 3.0.0-alpha.0

package/docs/frameworks/react/styling/classnames.md

@@ -1,94 +0,0 @@
----
-title: Class Names
-description: Style consent components using className props and per-slot
-  className targeting via the theme.
-group: frameworks
----
-## Prefer Slots for Stock Components
-
-There is no single top-level `className` contract across every pre-built consent component.
-
-For the stock `ConsentBanner`, `ConsentDialog`, and `ConsentWidget`, prefer `theme.slots` first. That keeps the markup intact and lets you target the exact part you need.
-
-## Per-Slot className
-
-Target individual component parts via the theme's `slots` object. Each slot accepts a string (className) or an object with `className` and `style`:
-
-```tsx
-const theme = {
-  slots: {
-    consentBannerTitle: 'text-xl font-semibold',
-    consentBannerDescription: 'text-sm text-gray-600',
-    consentBannerFooter: 'flex gap-3',
-    buttonPrimary: 'rounded-full px-6',
-  },
-} satisfies Theme;
-```
-
-## Combining with CSS Modules
-
-```tsx
-import styles from './consent.module.css';
-
-const theme = {
-  slots: {
-    consentBannerCard: styles.bannerCard,
-    consentBannerTitle: styles.bannerTitle,
-    buttonPrimary: styles.primaryButton,
-  },
-} satisfies Theme;
-```
-
-```css title="consent.module.css"
-.bannerCard {
-  backdrop-filter: blur(12px);
-  background: rgba(255, 255, 255, 0.9);
-}
-
-.bannerTitle {
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.primaryButton {
-  border-radius: 9999px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-```
-
-## When to Use Raw className
-
-Use raw className-level styling when:
-
-* your styling system is already class-driven
-* tokens are too broad for the change
-* slots already identify the correct element
-
-If the request is "make the banner footer darker", prefer `theme.colors.surfaceHover` first. If the request is "add a border and spacing only to the footer", prefer `theme.slots.consentBannerFooter`.
-
-## Advanced: `noStyle`
-
-Use `noStyle` only when you want to remove defaults and style from scratch while still keeping c15t's component structure:
-
-```tsx
-{/* Remove all styles from a specific component */}
-<ConsentBanner noStyle />
-
-{/* Remove all styles globally */}
-<ConsentManagerProvider options={{ noStyle: true, ... }}>
-```
-
-You can also set `noStyle` per-slot:
-
-```tsx
-const theme = {
-  slots: {
-    consentBannerCard: { noStyle: true, className: 'my-custom-card' },
-  },
-} satisfies Theme;
-```
-
-Treat `noStyle` as an advanced escape hatch. Do not jump to it just because a token or slot needs debugging.
-
-For full custom markup and behavior, continue to [Headless Mode](../headless).

package/docs/frameworks/react/styling/color-scheme.md

@@ -1,84 +0,0 @@
----
-title: Color Scheme
-description: Support light mode, dark mode, and system preference detection in
-  consent components.
-group: frameworks
----
-c15t supports light and dark mode through the theme's `colors` and `dark` token groups. The active color scheme is determined by one of three methods:
-
-1. **Explicit setting** via the `colorScheme` option
-2. **CSS class detection** - c15t checks for `.dark` on the document element
-3. **System preference** - matches `prefers-color-scheme` media query
-
-## Configuration
-
-Set the color scheme on the provider:
-
-```tsx
-import { type ReactNode } from 'react';
-import { ConsentManagerProvider } from '@c15t/react';
-
-function ConsentManager({ children }: { children: ReactNode }) {
-  return (
-    <ConsentManagerProvider
-      options={{
-        mode: 'hosted',
-        backendURL: 'https://your-instance.c15t.dev',
-        colorScheme: 'system', // 'light' | 'dark' | 'system'
-        theme: {
-          colors: {
-            primary: '#6366f1',
-            surface: '#ffffff',
-            text: '#1f2937',
-          },
-          dark: {
-            primary: '#818cf8',
-            surface: '#1f2937',
-            text: '#f9fafb',
-          },
-        },
-      }}
-    >
-      {children}
-    </ConsentManagerProvider>
-  );
-}
-```
-
-## useColorScheme Hook
-
-For programmatic control over the color scheme:
-
-```tsx
-import { useColorScheme } from '@c15t/react';
-
-function ThemeToggle() {
-  // Pass the desired scheme - 'light', 'dark', 'system', or null (disable)
-  useColorScheme('system');
-}
-```
-
-|Value|Behavior|
-|--|--|
-|`'light'`|Force light mode|
-|`'dark'`|Force dark mode|
-|`'system'`|Follow `prefers-color-scheme` media query|
-|`null`|Disable - c15t won't manage color scheme|
-
-## How Dark Mode Works
-
-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.
-
-```tsx
-const theme = {
-  colors: {
-    surface: '#ffffff',     // Light mode
-    text: '#1f2937',        // Light mode
-  },
-  dark: {
-    surface: '#1f2937',     // Dark mode override
-    text: '#f9fafb',        // Dark mode override
-    // primary is NOT set - inherits from colors.primary
-  },
-} satisfies Theme;
-```

package/docs/frameworks/react/styling/css-variables.md

@@ -1,53 +0,0 @@
----
-title: CSS Variables
-description: Reference for all --c15t-* CSS custom properties generated by the theme system.
-group: frameworks
----
-Every theme token is converted to a `--c15t-*` CSS custom property at runtime. You can override these variables in your stylesheet without using the JavaScript theme API.
-
-## Variable Reference
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`ThemeCSSVariables\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "ThemeCSSVariables" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
-
-## Overriding Variables
-
-Override in your stylesheet:
-
-```css
-:root {
-  --c15t-primary: #8b5cf6;
-  --c15t-surface: #fafafa;
-  --c15t-radius-md: 1rem;
-}
-
-/* Dark mode overrides */
-.dark,
-.c15t-dark {
-  --c15t-primary: #a78bfa;
-  --c15t-surface: #18181b;
-  --c15t-text: #fafafa;
-}
-```
-
-## Scoped Overrides
-
-Target specific components by scoping variables:
-
-```tsx
-<div className="checkout-consent">
-  <ConsentBanner />
-</div>
-```
-
-```css
-/* Only affect c15t components inside .checkout-consent */
-.checkout-consent {
-  --c15t-surface: #f0f9ff;
-  --c15t-radius-lg: 1.5rem;
-}
-```

package/docs/frameworks/react/styling/slots.md

@@ -1,94 +0,0 @@
----
-title: Component Slots
-description: Target individual component parts with styles using the slot system
-  - className strings or inline style objects.
-group: frameworks
----
-## 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 `consentDialogTag`.
-
-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
-
-Pass slot styles in the theme's `slots` object:
-
-```tsx
-const theme = {
-  slots: {
-    consentBannerFooter: 'border-t border-black/10 px-6',
-    consentBannerTitle: 'text-xl font-bold tracking-tight',
-
-    // Object value = className + inline styles
-    consentBannerCard: {
-      className: 'rounded-xl shadow-lg',
-      style: { maxWidth: '600px' },
-    },
-  },
-} satisfies Theme;
-```
-
-## Slot Style Types
-
-Each slot accepts either a `string` (treated as className) or a `SlotStyle` object:
-
-```tsx
-// String: treated as className
-consentBannerTitle: 'my-custom-class'
-
-// Object: className + style + noStyle
-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.
-
-## API Reference
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`ComponentSlots\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "ComponentSlots" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`SlotStyle\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "SlotStyle" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

package/docs/frameworks/react/styling/tailwind.md

@@ -1,119 +0,0 @@
----
-title: Tailwind CSS
-description: Use Tailwind CSS utility classes to style consent components via
-  the slot system.
-group: frameworks
----
-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.
-
-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 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";
-```
-
-### 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/frameworks/react/styling/tokens.md

@@ -1,156 +0,0 @@
----
-title: Design Tokens
-description: The six base token categories that control colors, typography,
-  spacing, radius, shadows, and motion, plus optional dark-mode overrides.
-group: frameworks
----
-## 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;
-```
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`ColorTokens\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "ColorTokens" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
-
-## 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;
-```
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`TypographyTokens\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "TypographyTokens" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
-
-## 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;
-```
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`SpacingTokens\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "SpacingTokens" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
-
-## 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;
-```
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`RadiusTokens\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "RadiusTokens" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
-
-## 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;
-```
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`ShadowTokens\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "ShadowTokens" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
-
-## 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;
-```
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`MotionTokens\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "MotionTokens" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*