@c15t/react 2.2.0 → 3.0.0-alpha.0

package/docs/shared/react/styling/tokens.md

@@ -1,155 +0,0 @@
----
-title: Tokens
-description: Reference page for tokens.
-group: reference
----
-## 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.\*

package/docs/shared/troubleshooting.md

@@ -1,82 +0,0 @@
----
-title: Troubleshooting
-description: Reference page for troubleshooting.
-group: reference
----
-## "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.