Next.js Supabase V3 (#463)

Version 3 of the kit:
- Radix UI replaced with Base UI (using the Shadcn UI patterns)
- next-intl replaces react-i18next
- enhanceAction deprecated; usage moved to next-safe-action
- main layout now wrapped with [locale] path segment
- Teams only mode
- Layout updates
- Zod v4
- Next.js 16.2
- Typescript 6
- All other dependencies updated
- Removed deprecated Edge CSRF
- Dynamic Github Action runner

docs/components/cookie-banner.mdoc

@@ -0,0 +1,130 @@
+---
+status: "published"
+label: "Cookie Banner"
+title: "Cookie Banner Component in the Next.js Supabase SaaS kit"
+description: "Learn how to use the Cookie Banner component in the Next.js Supabase SaaS kit"
+order: 7
+---
+
+This module provides a `CookieBanner` component and a `useCookieConsent` hook for managing cookie consent in React applications.
+
+{% component path="cookie-banner" /%}
+
+## CookieBanner Component
+
+The CookieBanner component displays a consent banner for cookies and tracking technologies.
+
+### Usage
+
+```jsx
+import dynamic from 'next/dynamic';
+
+const CookieBanner = dynamic(() => import('@kit/ui/cookie-banner').then(m => m.CookieBanner), {
+  ssr: false
+});
+
+function App() {
+  return (
+    <div>
+      {/* Your app content */}
+      <CookieBanner />
+    </div>
+  );
+}
+```
+
+### Features
+
+- Displays only when consent status is unknown
+- Automatically hides after user interaction
+- Responsive design (different layouts for mobile and desktop)
+- Internationalization support via the `Trans` component
+- Animated entrance using Tailwind CSS
+
+## useCookieConsent Hook
+
+This custom hook manages the cookie consent state and provides methods to update it.
+
+### Usage
+
+```jsx
+import { useCookieConsent } from '@kit/ui/cookie-banner';
+
+function MyComponent() {
+  const { status, accept, reject, clear } = useCookieConsent();
+
+  // Use these values and functions as needed
+}
+```
+
+### API
+
+- `status: ConsentStatus`: Current consent status (Accepted, Rejected, or Unknown)
+- `accept(): void`: Function to accept cookies
+- `reject(): void`: Function to reject cookies
+- `clear(): void`: Function to clear the current consent status
+
+## ConsentStatus Enum
+
+```typescript
+enum ConsentStatus {
+  Accepted = 'accepted',
+  Rejected = 'rejected',
+  Unknown = 'unknown'
+}
+```
+
+## Key Features
+
+1. **Persistent Storage**: Consent status is stored in localStorage for persistence across sessions.
+2. **Server-Side Rendering Compatible**: Checks for browser environment before accessing localStorage.
+3. **Customizable**: The `COOKIE_CONSENT_STATUS` key can be configured as needed.
+4. **Reactive**: The banner automatically updates based on the consent status.
+
+## Styling
+
+The component uses Tailwind CSS for styling, with support for dark mode and responsive design.
+
+## Accessibility
+
+- Uses Base UI's Dialog primitive for improved accessibility
+- Autofocus on the "Accept" button for keyboard navigation
+
+## Internationalization
+
+The component uses the `Trans` component for internationalization. Ensure you have the following keys in your i18n configuration:
+
+- `cookieBanner.title`
+- `cookieBanner.description`
+- `cookieBanner.reject`
+- `cookieBanner.accept`
+
+## Best Practices
+
+1. Place the `CookieBanner` component at the root of your application to ensure it's always visible when needed.
+2. Use the `useCookieConsent` hook to conditionally render content or initialize tracking scripts based on the user's consent.
+3. Provide clear and concise information about your cookie usage in the banner description.
+4. Ensure your privacy policy is up-to-date and accessible from the cookie banner or nearby.
+
+## Example: Conditional Script Loading
+
+```jsx
+function App() {
+  const { status } = useCookieConsent();
+
+  useEffect(() => {
+    if (status === ConsentStatus.Accepted) {
+      // Initialize analytics or other cookie-dependent scripts
+    }
+  }, [status]);
+
+  return (
+    <div>
+      {/* Your app content */}
+      <CookieBanner />
+    </div>
+  );
+}
+```
+
+This cookie consent management system provides a user-friendly way to comply with cookie laws and regulations while maintaining a good user experience.