@djangocfg/ui-nextjs 2.1.404 → 2.1.408

package/README.md

@@ -6,10 +6,12 @@
 
 # @djangocfg/ui-nextjs
 
-Next-specific runtime for DjangoCFG: theme provider, PWA install support, and browser-storage hooks.
+Next-specific runtime for DjangoCFG: PWA install support and browser-storage hooks.
 
 UI primitives (Button, Card, Sidebar, Pagination, Breadcrumb, etc.) live in [`@djangocfg/ui-core`](../ui-core) — they're framework-agnostic and don't belong here. Import them from there directly.
 
+> **Theme moved.** `ThemeProvider`, `ThemeToggle`, `ForceTheme`, `useThemeContext` are framework-agnostic and now live in [`@djangocfg/ui-core`](../ui-core). The `@djangocfg/ui-nextjs/theme` subpath still re-exports them for backward compatibility, but new code should import from `@djangocfg/ui-core`.
+
 **Part of [DjangoCFG](https://djangocfg.com).**
 
 ## Install
@@ -22,7 +24,7 @@ pnpm add @djangocfg/ui-nextjs
 
 | Subpath | Purpose |
 |---|---|
-| `@djangocfg/ui-nextjs/theme` | `ThemeProvider` (next-themes), `ThemeToggle`, `useResolvedTheme` |
+| `@djangocfg/ui-nextjs/theme` | Back-compat re-export of the theme runtime — now defined in `@djangocfg/ui-core` |
 | `@djangocfg/ui-nextjs/pwa` | `PwaProvider`, `A2HSHint`, `useInstall`, `useIsPWA`, install detection helpers |
 | `@djangocfg/ui-nextjs/hooks` | `useLocalStorage`, `useSessionStorage` and other Next-runtime-only hooks |
 
@@ -30,8 +32,12 @@ That's it. Anything else you might be looking for is in `@djangocfg/ui-core`.
 
 ## Theme
 
+The theme runtime lives in `@djangocfg/ui-core` (it is framework-agnostic).
+The `/theme` subpath here re-exports it so existing imports keep working.
+
 ```tsx
-import { ThemeProvider, ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+// Preferred — import directly from ui-core:
+import { ThemeProvider, ThemeToggle } from '@djangocfg/ui-core';
 
 <ThemeProvider>
   {children}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.404",
+  "version": "2.1.408",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -75,11 +75,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.404",
-    "@djangocfg/i18n": "^2.1.404",
-    "@djangocfg/nextjs": "^2.1.404",
-    "@djangocfg/ui-core": "^2.1.404",
-    "@djangocfg/ui-tools": "^2.1.404",
+    "@djangocfg/api": "^2.1.408",
+    "@djangocfg/i18n": "^2.1.408",
+    "@djangocfg/nextjs": "^2.1.408",
+    "@djangocfg/ui-core": "^2.1.408",
+    "@djangocfg/ui-tools": "^2.1.408",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -102,7 +102,7 @@
     "react-chartjs-2": "^5.3.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.404",
+    "@djangocfg/typescript-config": "^2.1.408",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@types/node": "^24.7.2",

package/src/theme/index.ts

@@ -1,9 +1,26 @@
+/**
+ * Theme system — moved to @djangocfg/ui-core/theme (framework-agnostic).
+ * This module re-exports it for backward compatibility.
+ */
+
 'use client';
 
-export { ThemeProvider, useThemeContext } from './ThemeProvider';
-export type { Theme, ThemeProviderProps } from './ThemeProvider';
-export { ThemeToggle } from './ThemeToggle';
-export { ForceTheme } from './ForceTheme';
-export { ThemeOverride, resolveForcedTheme } from './ThemeOverride';
-export type { ThemeOverrideRule, ThemeOverrideProps, ForcedTheme } from './ThemeOverride';
-export { ForcedThemeProvider, useForcedTheme } from './ForcedThemeContext';
+export {
+  ThemeProvider,
+  useThemeContext,
+  ThemeToggle,
+  ForceTheme,
+  ThemeOverride,
+  resolveForcedTheme,
+  ForcedThemeProvider,
+  useForcedTheme,
+} from '@djangocfg/ui-core/theme';
+export type {
+  Theme,
+  ThemeProviderProps,
+  ThemeToggleProps,
+  ThemeLockBehavior,
+  ThemeOverrideRule,
+  ThemeOverrideProps,
+  ForcedTheme,
+} from '@djangocfg/ui-core/theme';

package/src/theme/ForceTheme.tsx

@@ -1,116 +0,0 @@
-/**
- * ForceTheme - Force a specific theme for a section
- *
- * Wraps content to override the global theme setting.
- * Works by adding both the theme class and inline CSS variables
- * to ensure proper theme application regardless of parent context.
- */
-
-'use client';
-
-import React, { ReactNode } from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-interface ForceThemeProps {
-  theme: 'light' | 'dark';
-  children: ReactNode;
-  className?: string;
-}
-
-// Dark theme CSS variables
-const darkThemeVars = {
-  // Base HSL values
-  '--background': '0 0% 4%',
-  '--foreground': '0 0% 98%',
-  '--card': '0 0% 8%',
-  '--card-foreground': '0 0% 98%',
-  '--popover': '0 0% 12%',
-  '--popover-foreground': '0 0% 98%',
-  '--primary': '217 91% 60%',
-  '--primary-foreground': '0 0% 100%',
-  '--secondary': '0 0% 98%',
-  '--secondary-foreground': '0 0% 9%',
-  '--muted': '0 0% 10%',
-  '--muted-foreground': '0 0% 60%',
-  '--accent': '0 0% 15%',
-  '--accent-foreground': '0 0% 98%',
-  '--destructive': '0 84% 60%',
-  '--destructive-foreground': '0 0% 98%',
-  '--border': '0 0% 15%',
-  '--input': '0 0% 15%',
-  '--ring': '217 91% 60%',
-  // Tailwind color tokens (used by bg-*, text-*, etc)
-  '--color-background': 'hsl(0 0% 4%)',
-  '--color-foreground': 'hsl(0 0% 98%)',
-  '--color-card': 'hsl(0 0% 8%)',
-  '--color-card-foreground': 'hsl(0 0% 98%)',
-  '--color-primary': 'hsl(217 91% 60%)',
-  '--color-primary-foreground': 'hsl(0 0% 100%)',
-  '--color-secondary': 'hsl(0 0% 98%)',
-  '--color-secondary-foreground': 'hsl(0 0% 9%)',
-  '--color-muted': 'hsl(0 0% 10%)',
-  '--color-muted-foreground': 'hsl(0 0% 60%)',
-  '--color-accent': 'hsl(0 0% 15%)',
-  '--color-accent-foreground': 'hsl(0 0% 98%)',
-  '--color-destructive': 'hsl(0 84% 60%)',
-  '--color-destructive-foreground': 'hsl(0 0% 98%)',
-  '--color-border': 'hsl(0 0% 15%)',
-  '--color-input': 'hsl(0 0% 15%)',
-  '--color-ring': 'hsl(217 91% 60%)',
-} as React.CSSProperties;
-
-// Light theme CSS variables
-const lightThemeVars = {
-  // Base HSL values
-  '--background': '0 0% 96%',
-  '--foreground': '0 0% 9%',
-  '--card': '0 0% 100%',
-  '--card-foreground': '0 0% 9%',
-  '--popover': '0 0% 100%',
-  '--popover-foreground': '0 0% 9%',
-  '--primary': '217 91% 60%',
-  '--primary-foreground': '0 0% 100%',
-  '--secondary': '0 0% 9%',
-  '--secondary-foreground': '0 0% 98%',
-  '--muted': '0 0% 96%',
-  '--muted-foreground': '0 0% 40%',
-  '--accent': '0 0% 92%',
-  '--accent-foreground': '0 0% 9%',
-  '--destructive': '0 84% 60%',
-  '--destructive-foreground': '0 0% 98%',
-  '--border': '0 0% 90%',
-  '--input': '0 0% 90%',
-  '--ring': '217 91% 60%',
-  // Tailwind color tokens (used by bg-*, text-*, etc)
-  '--color-background': 'hsl(0 0% 96%)',
-  '--color-foreground': 'hsl(0 0% 9%)',
-  '--color-card': 'hsl(0 0% 100%)',
-  '--color-card-foreground': 'hsl(0 0% 9%)',
-  '--color-primary': 'hsl(217 91% 60%)',
-  '--color-primary-foreground': 'hsl(0 0% 100%)',
-  '--color-secondary': 'hsl(0 0% 9%)',
-  '--color-secondary-foreground': 'hsl(0 0% 98%)',
-  '--color-muted': 'hsl(0 0% 96%)',
-  '--color-muted-foreground': 'hsl(0 0% 40%)',
-  '--color-accent': 'hsl(0 0% 92%)',
-  '--color-accent-foreground': 'hsl(0 0% 9%)',
-  '--color-destructive': 'hsl(0 84% 60%)',
-  '--color-destructive-foreground': 'hsl(0 0% 98%)',
-  '--color-border': 'hsl(0 0% 90%)',
-  '--color-input': 'hsl(0 0% 90%)',
-  '--color-ring': 'hsl(217 91% 60%)',
-} as React.CSSProperties;
-
-export function ForceTheme({ theme, children, className }: ForceThemeProps) {
-  const themeVars = theme === 'dark' ? darkThemeVars : lightThemeVars;
-
-  return (
-    <div
-      className={cn(theme, className)}
-      style={themeVars}
-    >
-      {children}
-    </div>
-  );
-}

package/src/theme/ForcedThemeContext.tsx

@@ -1,45 +0,0 @@
-/**
- * ForcedThemeContext
- *
- * Published by `ThemeOverride` so downstream UI (theme switchers, toggles,
- * indicators) can tell whether the current route forces a specific theme and
- * adapt accordingly — typically by disabling or hiding their controls.
- *
- * Default value is `null` (no override) — consumers outside a `ThemeOverride`
- * mount see the same shape as consumers on an unforced route, so there's no
- * need to guard against the provider being absent.
- */
-
-'use client';
-
-import { createContext, useContext, type ReactNode } from 'react';
-
-import type { ForcedTheme } from './ThemeOverride';
-
-const ForcedThemeContext = createContext<ForcedTheme | null>(null);
-
-interface ForcedThemeProviderProps {
-  value: ForcedTheme | null;
-  children: ReactNode;
-}
-
-export function ForcedThemeProvider({ value, children }: ForcedThemeProviderProps) {
-  return (
-    <ForcedThemeContext.Provider value={value}>
-      {children}
-    </ForcedThemeContext.Provider>
-  );
-}
-
-/**
- * Read the currently-forced theme. `null` means the user is free to choose.
- *
- * @example
- * ```tsx
- * const forced = useForcedTheme();
- * if (forced) return <p>Theme is locked to {forced} on this page.</p>;
- * ```
- */
-export function useForcedTheme(): ForcedTheme | null {
-  return useContext(ForcedThemeContext);
-}

package/src/theme/ThemeOverride.tsx

@@ -1,163 +0,0 @@
-/**
- * ThemeOverride - Pathname-aware forced theme
- *
- * Applies a forced `light` or `dark` theme via `next-themes` while the current
- * pathname matches any of the supplied rules, and restores the user's prior
- * choice when the pathname no longer matches.
- *
- * Unlike `ForceTheme` (which scopes CSS vars to a wrapper div), this component
- * mutates the real `next-themes` value — so the `html.dark` class is applied
- * and every surface (navbar, footer, body, page) picks the new theme up
- * consistently.
- *
- * The matcher is **dependency-free** and understands:
- * - Exact match (`/` matches `/`)
- * - Prefix match (`/docs` matches `/docs/getting-started`)
- * - Glob wildcards (`*` for a single segment, `**` for any depth)
- *
- * Consumers pass the pathname already stripped of the locale prefix — matching
- * is not locale-aware here.
- *
- * @example
- * ```tsx
- * <ThemeOverride
- *   pathname={pathname}
- *   rules={[
- *     { path: '/', theme: 'dark' },
- *     { path: ['/legal', '/legal/**'], theme: 'light' },
- *   ]}
- * />
- * ```
- */
-
-'use client';
-
-import { useEffect, useMemo, useRef } from 'react';
-
-import { useThemeContext } from './ThemeProvider';
-
-import type { Theme } from './ThemeProvider';
-
-export type ForcedTheme = Exclude<Theme, 'system'>;
-
-export interface ThemeOverrideRule {
-  /** Path (or array of paths) to match against. Supports `*` and `**` globs. */
-  path: string | string[];
-  /** Theme to apply while the path matches. */
-  theme: ForcedTheme;
-}
-
-export interface ThemeOverrideProps {
-  /** Pathname stripped of locale prefix. Use `usePathnameWithoutLocale()` if you have it. */
-  pathname: string;
-  /** Rules evaluated top-to-bottom — first match wins. */
-  rules?: ThemeOverrideRule[];
-}
-
-/**
- * Resolve the first matching rule's forced theme for a pathname, or `null`.
- * Pure helper — use this to render a `ForcedThemeProvider` in the same tree
- * where you mount `ThemeOverride`.
- */
-export function resolveForcedTheme(
-  pathname: string,
-  rules?: ThemeOverrideRule[],
-): ForcedTheme | null {
-  if (!rules || rules.length === 0) return null;
-  for (const rule of rules) {
-    if (matchesAny(pathname, rule.path)) return rule.theme;
-  }
-  return null;
-}
-
-// --- inlined matcher (no dep on @djangocfg/layouts) -------------------------
-
-function matchGlob(pathname: string, pattern: string): boolean {
-  const pathParts = pathname.replace(/\/+$/, '').split('/').filter(Boolean);
-  const patternParts = pattern.replace(/\/+$/, '').split('/').filter(Boolean);
-
-  let pi = 0;
-  let ti = 0;
-
-  while (ti < patternParts.length && pi < pathParts.length) {
-    const pat = patternParts[ti];
-    if (pat === '**') {
-      if (ti === patternParts.length - 1) return true;
-      const next = patternParts[ti + 1];
-      while (pi < pathParts.length) {
-        if (pathParts[pi] === next || next === '*') break;
-        pi++;
-      }
-      ti++;
-    } else if (pat === '*') {
-      pi++;
-      ti++;
-    } else {
-      if (pathParts[pi] !== pat) return false;
-      pi++;
-      ti++;
-    }
-  }
-
-  if (ti < patternParts.length) {
-    for (let i = ti; i < patternParts.length; i++) {
-      if (patternParts[i] !== '**') return false;
-    }
-  }
-
-  return pi === pathParts.length;
-}
-
-function matchOne(pathname: string, pattern: string): boolean {
-  const p = pathname.length > 1 ? pathname.replace(/\/+$/, '') : pathname;
-  const q = pattern.length > 1 ? pattern.replace(/\/+$/, '') : pattern;
-  if (q.includes('*')) return matchGlob(p, q);
-  return p === q || p.startsWith(q + '/');
-}
-
-function matchesAny(pathname: string, path: string | string[]): boolean {
-  return Array.isArray(path) ? path.some((p) => matchOne(pathname, p)) : matchOne(pathname, path);
-}
-
-// --- component --------------------------------------------------------------
-
-export function ThemeOverride({ pathname, rules }: ThemeOverrideProps) {
-  const { theme, setTheme } = useThemeContext();
-
-  // First rule whose path matches the current pathname. null = no override.
-  const forced = useMemo<ForcedTheme | null>(
-    () => resolveForcedTheme(pathname, rules),
-    [pathname, rules],
-  );
-
-  // Stash the user's own pick so we can restore it when they leave a forced route.
-  // We capture only non-override theme values (from renders where `forced === null`).
-  // Stored as a ref so it doesn't drive the effect.
-  const userThemeRef = useRef<string | undefined>(undefined);
-
-  // Keep userThemeRef in sync with what next-themes reports **while not forcing**.
-  // Every render where the route isn't overridden, the current `theme` IS the user's
-  // own pick — snapshot it. During a forced render we leave the ref alone so the
-  // original value survives until we hand control back.
-  useEffect(() => {
-    if (forced === null && theme) {
-      userThemeRef.current = theme;
-    }
-  }, [forced, theme]);
-
-  // Apply / revert the forced theme. Intentionally driven only by `forced` — the
-  // user may toggle the theme manually while forcing is off, and that's fine
-  // (the sync effect above records the new value).
-  useEffect(() => {
-    if (forced) {
-      setTheme(forced);
-      return;
-    }
-    const restore = userThemeRef.current ?? 'system';
-    setTheme(restore);
-    // setTheme from next-themes is stable by ref; omit on purpose.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [forced]);
-
-  return null;
-}

package/src/theme/ThemeProvider.tsx

@@ -1,77 +0,0 @@
-/**
- * ThemeProvider - Universal theme management
- *
- * Re-exports next-themes ThemeProvider with sensible defaults.
- * Supports light, dark, and system themes with localStorage persistence.
- *
- * @example
- * ```tsx
- * // In app/layout.tsx
- * import { ThemeProvider } from '@djangocfg/ui-nextjs';
- *
- * <ThemeProvider
- *   attribute="class"
- *   defaultTheme="system"
- *   enableSystem
- * >
- *   {children}
- * </ThemeProvider>
- * ```
- */
-
-'use client';
-
-import { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';
-
-import type { ThemeProviderProps as NextThemesProviderProps } from 'next-themes';
-
-// Re-export types
-export type Theme = 'light' | 'dark' | 'system';
-export type ThemeProviderProps = NextThemesProviderProps;
-
-/**
- * ThemeProvider wraps next-themes with sensible defaults
- */
-export function ThemeProvider({
-  children,
-  attribute = 'class',
-  defaultTheme = 'system',
-  enableSystem = true,
-  disableTransitionOnChange = true,
-  ...props
-}: ThemeProviderProps) {
-  return (
-    <NextThemesProvider
-      attribute={attribute}
-      defaultTheme={defaultTheme}
-      enableSystem={enableSystem}
-      disableTransitionOnChange={disableTransitionOnChange}
-      {...props}
-    >
-      {children}
-    </NextThemesProvider>
-  );
-}
-
-/**
- * Hook to access theme context
- * Returns theme, setTheme, resolvedTheme, systemTheme, and themes
- */
-export function useThemeContext() {
-  const { theme, setTheme, resolvedTheme, systemTheme, themes } = useNextTheme();
-
-  const toggleTheme = () => {
-    // Toggle between light and dark (ignore system)
-    const currentResolved = resolvedTheme || 'light';
-    setTheme(currentResolved === 'light' ? 'dark' : 'light');
-  };
-
-  return {
-    theme: theme as Theme | undefined,
-    setTheme,
-    resolvedTheme: resolvedTheme as 'light' | 'dark' | undefined,
-    systemTheme: systemTheme as 'light' | 'dark' | undefined,
-    themes,
-    toggleTheme,
-  };
-}

package/src/theme/ThemeToggle.tsx

@@ -1,108 +0,0 @@
-/**
- * ThemeToggle - Theme switcher component
- *
- * Switches between light and dark themes.
- * Must be used within ThemeProvider.
- *
- * @example
- * ```tsx
- * import { ThemeToggle } from '@djangocfg/ui-nextjs';
- *
- * // Default
- * <ThemeToggle />
- *
- * // Compact (for mobile/tight spaces)
- * <ThemeToggle size="compact" />
- *
- * // Custom className
- * <ThemeToggle className="ml-auto" />
- * ```
- */
-
-'use client';
-
-import { Moon, Sun } from 'lucide-react';
-import { useEffect, useState } from 'react';
-
-import { Button } from '@djangocfg/ui-core/components';
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
-import { cn } from '@djangocfg/ui-core/lib';
-import { useForcedTheme } from './ForcedThemeContext';
-import { useThemeContext } from './ThemeProvider';
-
-export type ThemeLockBehavior = 'disable' | 'hide';
-
-export interface ThemeToggleProps {
-  /** Custom className */
-  className?: string;
-  /** Size variant (auto-detects mobile if not specified) */
-  size?: 'default' | 'compact' | 'auto';
-  /**
-   * What to do when the current route forces a theme via `ThemeOverride`.
-   * - `disable` (default): render the toggle disabled with a tooltip.
-   * - `hide`: render nothing.
-   */
-  lockedBehavior?: ThemeLockBehavior;
-  /** Title shown when the control is locked. */
-  lockedTitle?: string;
-}
-
-export function ThemeToggle({
-  className,
-  size = 'auto',
-  lockedBehavior = 'disable',
-  lockedTitle = 'Theme is set for this page',
-}: ThemeToggleProps) {
-  const { resolvedTheme, toggleTheme } = useThemeContext();
-  const forcedTheme = useForcedTheme();
-  const [mounted, setMounted] = useState(false);
-  const isMobile = useIsMobile();
-
-  // Prevent hydration mismatch
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const isLocked = Boolean(forcedTheme);
-  // Determine actual size based on prop and screen size
-  const actualSize = size === 'auto' ? (isMobile ? 'compact' : 'default') : size;
-  const buttonSize = actualSize === 'compact' ? 'h-8 w-8' : 'h-9 w-9';
-  const iconSize = actualSize === 'compact' ? 'h-3.5 w-3.5' : 'h-4 w-4';
-
-  // The icon always reflects what's on screen (forced or not) — that is
-  // `resolvedTheme`. When locked, it shows the forced theme's icon.
-  const showSun = mounted ? resolvedTheme === 'light' : true;
-
-  if (isLocked && lockedBehavior === 'hide') {
-    return null;
-  }
-
-  if (!mounted) {
-    return (
-      <Button
-        variant="ghost"
-        size="icon"
-        className={cn(buttonSize, className)}
-        disabled
-      >
-        <Sun className={iconSize} />
-        <span className="sr-only">Toggle theme</span>
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={isLocked ? undefined : toggleTheme}
-      disabled={isLocked}
-      title={isLocked ? lockedTitle : undefined}
-      aria-label={isLocked ? lockedTitle : 'Toggle theme'}
-      className={cn(buttonSize, isLocked && 'cursor-not-allowed opacity-60', className)}
-    >
-      {showSun ? <Sun className={iconSize} /> : <Moon className={iconSize} />}
-      <span className="sr-only">{isLocked ? lockedTitle : 'Toggle theme'}</span>
-    </Button>
-  );
-}