@djangocfg/ui-nextjs 2.1.102 → 2.1.104

package/dist/theme.cjs

@@ -1,189 +0,0 @@
-'use strict';
-
-var nextThemes = require('next-themes');
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var react = require('react');
-var components = require('@djangocfg/ui-core/components');
-var hooks = require('@djangocfg/ui-core/hooks');
-var lib = require('@djangocfg/ui-core/lib');
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-function ThemeProvider({
-  children,
-  attribute = "class",
-  defaultTheme = "system",
-  enableSystem = true,
-  disableTransitionOnChange = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    nextThemes.ThemeProvider,
-    {
-      attribute,
-      defaultTheme,
-      enableSystem,
-      disableTransitionOnChange,
-      ...props,
-      children
-    }
-  );
-}
-__name(ThemeProvider, "ThemeProvider");
-function useThemeContext() {
-  const { theme, setTheme, resolvedTheme, systemTheme, themes } = nextThemes.useTheme();
-  const toggleTheme = /* @__PURE__ */ __name(() => {
-    const currentResolved = resolvedTheme || "light";
-    setTheme(currentResolved === "light" ? "dark" : "light");
-  }, "toggleTheme");
-  return {
-    theme,
-    setTheme,
-    resolvedTheme,
-    systemTheme,
-    themes,
-    toggleTheme
-  };
-}
-__name(useThemeContext, "useThemeContext");
-function ThemeToggle({ className, size = "auto" }) {
-  const { resolvedTheme, toggleTheme } = useThemeContext();
-  const [mounted, setMounted] = react.useState(false);
-  const isMobile = hooks.useIsMobile();
-  react.useEffect(() => {
-    setMounted(true);
-  }, []);
-  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";
-  if (!mounted) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      components.Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: lib.cn(buttonSize, className),
-        disabled: true,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: iconSize }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle theme" })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    components.Button,
-    {
-      variant: "ghost",
-      size: "icon",
-      onClick: toggleTheme,
-      className: lib.cn(buttonSize, className),
-      title: `Switch to ${resolvedTheme === "light" ? "dark" : "light"} theme`,
-      children: [
-        resolvedTheme === "light" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: iconSize }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: iconSize }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle theme" })
-      ]
-    }
-  );
-}
-__name(ThemeToggle, "ThemeToggle");
-var 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%)"
-};
-var 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%)"
-};
-function ForceTheme({ theme, children, className }) {
-  const themeVars = theme === "dark" ? darkThemeVars : lightThemeVars;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: lib.cn(theme, className),
-      style: themeVars,
-      children
-    }
-  );
-}
-__name(ForceTheme, "ForceTheme");
-
-exports.ForceTheme = ForceTheme;
-exports.ThemeProvider = ThemeProvider;
-exports.ThemeToggle = ThemeToggle;
-exports.useThemeContext = useThemeContext;
-//# sourceMappingURL=theme.cjs.map
-//# sourceMappingURL=theme.cjs.map

package/dist/theme.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/theme/ThemeProvider.tsx","../src/theme/ThemeToggle.tsx","../src/theme/ForceTheme.tsx"],"names":["jsx","NextThemesProvider","useNextTheme","useState","useIsMobile","useEffect","jsxs","Button","cn","Sun","Moon"],"mappings":"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","file":"theme.cjs","sourcesContent":["/**\n * ThemeProvider - Universal theme management\n *\n * Re-exports next-themes ThemeProvider with sensible defaults.\n * Supports light, dark, and system themes with localStorage persistence.\n *\n * @example\n * ```tsx\n * // In app/layout.tsx\n * import { ThemeProvider } from '@djangocfg/ui-nextjs';\n *\n * <ThemeProvider\n *   attribute=\"class\"\n *   defaultTheme=\"system\"\n *   enableSystem\n * >\n *   {children}\n * </ThemeProvider>\n * ```\n */\n\n'use client';\n\nimport { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';\n\nimport type { ThemeProviderProps as NextThemesProviderProps } from 'next-themes';\n\n// Re-export types\nexport type Theme = 'light' | 'dark' | 'system';\nexport type ThemeProviderProps = NextThemesProviderProps;\n\n/**\n * ThemeProvider wraps next-themes with sensible defaults\n */\nexport function ThemeProvider({\n  children,\n  attribute = 'class',\n  defaultTheme = 'system',\n  enableSystem = true,\n  disableTransitionOnChange = true,\n  ...props\n}: ThemeProviderProps) {\n  return (\n    <NextThemesProvider\n      attribute={attribute}\n      defaultTheme={defaultTheme}\n      enableSystem={enableSystem}\n      disableTransitionOnChange={disableTransitionOnChange}\n      {...props}\n    >\n      {children}\n    </NextThemesProvider>\n  );\n}\n\n/**\n * Hook to access theme context\n * Returns theme, setTheme, resolvedTheme, systemTheme, and themes\n */\nexport function useThemeContext() {\n  const { theme, setTheme, resolvedTheme, systemTheme, themes } = useNextTheme();\n\n  const toggleTheme = () => {\n    // Toggle between light and dark (ignore system)\n    const currentResolved = resolvedTheme || 'light';\n    setTheme(currentResolved === 'light' ? 'dark' : 'light');\n  };\n\n  return {\n    theme: theme as Theme | undefined,\n    setTheme,\n    resolvedTheme: resolvedTheme as 'light' | 'dark' | undefined,\n    systemTheme: systemTheme as 'light' | 'dark' | undefined,\n    themes,\n    toggleTheme,\n  };\n}\n","/**\n * ThemeToggle - Theme switcher component\n *\n * Switches between light and dark themes.\n * Must be used within ThemeProvider.\n *\n * @example\n * ```tsx\n * import { ThemeToggle } from '@djangocfg/ui-nextjs';\n *\n * // Default\n * <ThemeToggle />\n *\n * // Compact (for mobile/tight spaces)\n * <ThemeToggle size=\"compact\" />\n *\n * // Custom className\n * <ThemeToggle className=\"ml-auto\" />\n * ```\n */\n\n'use client';\n\nimport { Moon, Sun } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { Button } from '@djangocfg/ui-core/components';\nimport { useIsMobile } from '@djangocfg/ui-core/hooks';\nimport { cn } from '@djangocfg/ui-core/lib';\nimport { useThemeContext } from './ThemeProvider';\n\nexport interface ThemeToggleProps {\n  /** Custom className */\n  className?: string;\n  /** Size variant (auto-detects mobile if not specified) */\n  size?: 'default' | 'compact' | 'auto';\n}\n\nexport function ThemeToggle({ className, size = 'auto' }: ThemeToggleProps) {\n  const { resolvedTheme, toggleTheme } = useThemeContext();\n  const [mounted, setMounted] = useState(false);\n  const isMobile = useIsMobile();\n\n  // Prevent hydration mismatch\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  // Determine actual size based on prop and screen size\n  const actualSize = size === 'auto' ? (isMobile ? 'compact' : 'default') : size;\n  const buttonSize = actualSize === 'compact' ? 'h-8 w-8' : 'h-9 w-9';\n  const iconSize = actualSize === 'compact' ? 'h-3.5 w-3.5' : 'h-4 w-4';\n\n  if (!mounted) {\n    return (\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(buttonSize, className)}\n        disabled\n      >\n        <Sun className={iconSize} />\n        <span className=\"sr-only\">Toggle theme</span>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={toggleTheme}\n      className={cn(buttonSize, className)}\n      title={`Switch to ${resolvedTheme === 'light' ? 'dark' : 'light'} theme`}\n    >\n      {resolvedTheme === 'light' ? (\n        <Sun className={iconSize} />\n      ) : (\n        <Moon className={iconSize} />\n      )}\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  );\n}\n","/**\n * ForceTheme - Force a specific theme for a section\n *\n * Wraps content to override the global theme setting.\n * Works by adding both the theme class and inline CSS variables\n * to ensure proper theme application regardless of parent context.\n */\n\n'use client';\n\nimport React, { ReactNode } from 'react';\n\nimport { cn } from '@djangocfg/ui-core/lib';\n\ninterface ForceThemeProps {\n  theme: 'light' | 'dark';\n  children: ReactNode;\n  className?: string;\n}\n\n// Dark theme CSS variables\nconst darkThemeVars = {\n  // Base HSL values\n  '--background': '0 0% 4%',\n  '--foreground': '0 0% 98%',\n  '--card': '0 0% 8%',\n  '--card-foreground': '0 0% 98%',\n  '--popover': '0 0% 12%',\n  '--popover-foreground': '0 0% 98%',\n  '--primary': '217 91% 60%',\n  '--primary-foreground': '0 0% 100%',\n  '--secondary': '0 0% 98%',\n  '--secondary-foreground': '0 0% 9%',\n  '--muted': '0 0% 10%',\n  '--muted-foreground': '0 0% 60%',\n  '--accent': '0 0% 15%',\n  '--accent-foreground': '0 0% 98%',\n  '--destructive': '0 84% 60%',\n  '--destructive-foreground': '0 0% 98%',\n  '--border': '0 0% 15%',\n  '--input': '0 0% 15%',\n  '--ring': '217 91% 60%',\n  // Tailwind color tokens (used by bg-*, text-*, etc)\n  '--color-background': 'hsl(0 0% 4%)',\n  '--color-foreground': 'hsl(0 0% 98%)',\n  '--color-card': 'hsl(0 0% 8%)',\n  '--color-card-foreground': 'hsl(0 0% 98%)',\n  '--color-primary': 'hsl(217 91% 60%)',\n  '--color-primary-foreground': 'hsl(0 0% 100%)',\n  '--color-secondary': 'hsl(0 0% 98%)',\n  '--color-secondary-foreground': 'hsl(0 0% 9%)',\n  '--color-muted': 'hsl(0 0% 10%)',\n  '--color-muted-foreground': 'hsl(0 0% 60%)',\n  '--color-accent': 'hsl(0 0% 15%)',\n  '--color-accent-foreground': 'hsl(0 0% 98%)',\n  '--color-destructive': 'hsl(0 84% 60%)',\n  '--color-destructive-foreground': 'hsl(0 0% 98%)',\n  '--color-border': 'hsl(0 0% 15%)',\n  '--color-input': 'hsl(0 0% 15%)',\n  '--color-ring': 'hsl(217 91% 60%)',\n} as React.CSSProperties;\n\n// Light theme CSS variables\nconst lightThemeVars = {\n  // Base HSL values\n  '--background': '0 0% 96%',\n  '--foreground': '0 0% 9%',\n  '--card': '0 0% 100%',\n  '--card-foreground': '0 0% 9%',\n  '--popover': '0 0% 100%',\n  '--popover-foreground': '0 0% 9%',\n  '--primary': '217 91% 60%',\n  '--primary-foreground': '0 0% 100%',\n  '--secondary': '0 0% 9%',\n  '--secondary-foreground': '0 0% 98%',\n  '--muted': '0 0% 96%',\n  '--muted-foreground': '0 0% 40%',\n  '--accent': '0 0% 92%',\n  '--accent-foreground': '0 0% 9%',\n  '--destructive': '0 84% 60%',\n  '--destructive-foreground': '0 0% 98%',\n  '--border': '0 0% 90%',\n  '--input': '0 0% 90%',\n  '--ring': '217 91% 60%',\n  // Tailwind color tokens (used by bg-*, text-*, etc)\n  '--color-background': 'hsl(0 0% 96%)',\n  '--color-foreground': 'hsl(0 0% 9%)',\n  '--color-card': 'hsl(0 0% 100%)',\n  '--color-card-foreground': 'hsl(0 0% 9%)',\n  '--color-primary': 'hsl(217 91% 60%)',\n  '--color-primary-foreground': 'hsl(0 0% 100%)',\n  '--color-secondary': 'hsl(0 0% 9%)',\n  '--color-secondary-foreground': 'hsl(0 0% 98%)',\n  '--color-muted': 'hsl(0 0% 96%)',\n  '--color-muted-foreground': 'hsl(0 0% 40%)',\n  '--color-accent': 'hsl(0 0% 92%)',\n  '--color-accent-foreground': 'hsl(0 0% 9%)',\n  '--color-destructive': 'hsl(0 84% 60%)',\n  '--color-destructive-foreground': 'hsl(0 0% 98%)',\n  '--color-border': 'hsl(0 0% 90%)',\n  '--color-input': 'hsl(0 0% 90%)',\n  '--color-ring': 'hsl(217 91% 60%)',\n} as React.CSSProperties;\n\nexport function ForceTheme({ theme, children, className }: ForceThemeProps) {\n  const themeVars = theme === 'dark' ? darkThemeVars : lightThemeVars;\n\n  return (\n    <div\n      className={cn(theme, className)}\n      style={themeVars}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/theme.d.mts

@@ -1,60 +0,0 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ThemeProviderProps as ThemeProviderProps$1 } from 'next-themes';
-
-type Theme = 'light' | 'dark' | 'system';
-type ThemeProviderProps = ThemeProviderProps$1;
-/**
- * ThemeProvider wraps next-themes with sensible defaults
- */
-declare function ThemeProvider({ children, attribute, defaultTheme, enableSystem, disableTransitionOnChange, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Hook to access theme context
- * Returns theme, setTheme, resolvedTheme, systemTheme, and themes
- */
-declare function useThemeContext(): {
-    theme: Theme | undefined;
-    setTheme: react.Dispatch<react.SetStateAction<string>>;
-    resolvedTheme: "light" | "dark" | undefined;
-    systemTheme: "light" | "dark" | undefined;
-    themes: string[];
-    toggleTheme: () => void;
-};
-
-/**
- * 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" />
- * ```
- */
-interface ThemeToggleProps {
-    /** Custom className */
-    className?: string;
-    /** Size variant (auto-detects mobile if not specified) */
-    size?: 'default' | 'compact' | 'auto';
-}
-declare function ThemeToggle({ className, size }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
-
-interface ForceThemeProps {
-    theme: 'light' | 'dark';
-    children: ReactNode;
-    className?: string;
-}
-declare function ForceTheme({ theme, children, className }: ForceThemeProps): react_jsx_runtime.JSX.Element;
-
-export { ForceTheme, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, useThemeContext };

package/dist/theme.d.ts

@@ -1,60 +0,0 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ThemeProviderProps as ThemeProviderProps$1 } from 'next-themes';
-
-type Theme = 'light' | 'dark' | 'system';
-type ThemeProviderProps = ThemeProviderProps$1;
-/**
- * ThemeProvider wraps next-themes with sensible defaults
- */
-declare function ThemeProvider({ children, attribute, defaultTheme, enableSystem, disableTransitionOnChange, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Hook to access theme context
- * Returns theme, setTheme, resolvedTheme, systemTheme, and themes
- */
-declare function useThemeContext(): {
-    theme: Theme | undefined;
-    setTheme: react.Dispatch<react.SetStateAction<string>>;
-    resolvedTheme: "light" | "dark" | undefined;
-    systemTheme: "light" | "dark" | undefined;
-    themes: string[];
-    toggleTheme: () => void;
-};
-
-/**
- * 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" />
- * ```
- */
-interface ThemeToggleProps {
-    /** Custom className */
-    className?: string;
-    /** Size variant (auto-detects mobile if not specified) */
-    size?: 'default' | 'compact' | 'auto';
-}
-declare function ThemeToggle({ className, size }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
-
-interface ForceThemeProps {
-    theme: 'light' | 'dark';
-    children: ReactNode;
-    className?: string;
-}
-declare function ForceTheme({ theme, children, className }: ForceThemeProps): react_jsx_runtime.JSX.Element;
-
-export { ForceTheme, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, useThemeContext };

package/dist/theme.mjs

@@ -1,184 +0,0 @@
-import { ThemeProvider as ThemeProvider$1, useTheme } from 'next-themes';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Sun, Moon } from 'lucide-react';
-import { useState, useEffect } from 'react';
-import { Button } from '@djangocfg/ui-core/components';
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
-import { cn } from '@djangocfg/ui-core/lib';
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-function ThemeProvider({
-  children,
-  attribute = "class",
-  defaultTheme = "system",
-  enableSystem = true,
-  disableTransitionOnChange = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ThemeProvider$1,
-    {
-      attribute,
-      defaultTheme,
-      enableSystem,
-      disableTransitionOnChange,
-      ...props,
-      children
-    }
-  );
-}
-__name(ThemeProvider, "ThemeProvider");
-function useThemeContext() {
-  const { theme, setTheme, resolvedTheme, systemTheme, themes } = useTheme();
-  const toggleTheme = /* @__PURE__ */ __name(() => {
-    const currentResolved = resolvedTheme || "light";
-    setTheme(currentResolved === "light" ? "dark" : "light");
-  }, "toggleTheme");
-  return {
-    theme,
-    setTheme,
-    resolvedTheme,
-    systemTheme,
-    themes,
-    toggleTheme
-  };
-}
-__name(useThemeContext, "useThemeContext");
-function ThemeToggle({ className, size = "auto" }) {
-  const { resolvedTheme, toggleTheme } = useThemeContext();
-  const [mounted, setMounted] = useState(false);
-  const isMobile = useIsMobile();
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  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";
-  if (!mounted) {
-    return /* @__PURE__ */ jsxs(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: cn(buttonSize, className),
-        disabled: true,
-        children: [
-          /* @__PURE__ */ jsx(Sun, { className: iconSize }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle theme" })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant: "ghost",
-      size: "icon",
-      onClick: toggleTheme,
-      className: cn(buttonSize, className),
-      title: `Switch to ${resolvedTheme === "light" ? "dark" : "light"} theme`,
-      children: [
-        resolvedTheme === "light" ? /* @__PURE__ */ jsx(Sun, { className: iconSize }) : /* @__PURE__ */ jsx(Moon, { className: iconSize }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle theme" })
-      ]
-    }
-  );
-}
-__name(ThemeToggle, "ThemeToggle");
-var 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%)"
-};
-var 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%)"
-};
-function ForceTheme({ theme, children, className }) {
-  const themeVars = theme === "dark" ? darkThemeVars : lightThemeVars;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(theme, className),
-      style: themeVars,
-      children
-    }
-  );
-}
-__name(ForceTheme, "ForceTheme");
-
-export { ForceTheme, ThemeProvider, ThemeToggle, useThemeContext };
-//# sourceMappingURL=theme.mjs.map
-//# sourceMappingURL=theme.mjs.map

package/dist/theme.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/theme/ThemeProvider.tsx","../src/theme/ThemeToggle.tsx","../src/theme/ForceTheme.tsx"],"names":["NextThemesProvider","useNextTheme","jsx","cn"],"mappings":"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","file":"theme.mjs","sourcesContent":["/**\n * ThemeProvider - Universal theme management\n *\n * Re-exports next-themes ThemeProvider with sensible defaults.\n * Supports light, dark, and system themes with localStorage persistence.\n *\n * @example\n * ```tsx\n * // In app/layout.tsx\n * import { ThemeProvider } from '@djangocfg/ui-nextjs';\n *\n * <ThemeProvider\n *   attribute=\"class\"\n *   defaultTheme=\"system\"\n *   enableSystem\n * >\n *   {children}\n * </ThemeProvider>\n * ```\n */\n\n'use client';\n\nimport { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';\n\nimport type { ThemeProviderProps as NextThemesProviderProps } from 'next-themes';\n\n// Re-export types\nexport type Theme = 'light' | 'dark' | 'system';\nexport type ThemeProviderProps = NextThemesProviderProps;\n\n/**\n * ThemeProvider wraps next-themes with sensible defaults\n */\nexport function ThemeProvider({\n  children,\n  attribute = 'class',\n  defaultTheme = 'system',\n  enableSystem = true,\n  disableTransitionOnChange = true,\n  ...props\n}: ThemeProviderProps) {\n  return (\n    <NextThemesProvider\n      attribute={attribute}\n      defaultTheme={defaultTheme}\n      enableSystem={enableSystem}\n      disableTransitionOnChange={disableTransitionOnChange}\n      {...props}\n    >\n      {children}\n    </NextThemesProvider>\n  );\n}\n\n/**\n * Hook to access theme context\n * Returns theme, setTheme, resolvedTheme, systemTheme, and themes\n */\nexport function useThemeContext() {\n  const { theme, setTheme, resolvedTheme, systemTheme, themes } = useNextTheme();\n\n  const toggleTheme = () => {\n    // Toggle between light and dark (ignore system)\n    const currentResolved = resolvedTheme || 'light';\n    setTheme(currentResolved === 'light' ? 'dark' : 'light');\n  };\n\n  return {\n    theme: theme as Theme | undefined,\n    setTheme,\n    resolvedTheme: resolvedTheme as 'light' | 'dark' | undefined,\n    systemTheme: systemTheme as 'light' | 'dark' | undefined,\n    themes,\n    toggleTheme,\n  };\n}\n","/**\n * ThemeToggle - Theme switcher component\n *\n * Switches between light and dark themes.\n * Must be used within ThemeProvider.\n *\n * @example\n * ```tsx\n * import { ThemeToggle } from '@djangocfg/ui-nextjs';\n *\n * // Default\n * <ThemeToggle />\n *\n * // Compact (for mobile/tight spaces)\n * <ThemeToggle size=\"compact\" />\n *\n * // Custom className\n * <ThemeToggle className=\"ml-auto\" />\n * ```\n */\n\n'use client';\n\nimport { Moon, Sun } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { Button } from '@djangocfg/ui-core/components';\nimport { useIsMobile } from '@djangocfg/ui-core/hooks';\nimport { cn } from '@djangocfg/ui-core/lib';\nimport { useThemeContext } from './ThemeProvider';\n\nexport interface ThemeToggleProps {\n  /** Custom className */\n  className?: string;\n  /** Size variant (auto-detects mobile if not specified) */\n  size?: 'default' | 'compact' | 'auto';\n}\n\nexport function ThemeToggle({ className, size = 'auto' }: ThemeToggleProps) {\n  const { resolvedTheme, toggleTheme } = useThemeContext();\n  const [mounted, setMounted] = useState(false);\n  const isMobile = useIsMobile();\n\n  // Prevent hydration mismatch\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  // Determine actual size based on prop and screen size\n  const actualSize = size === 'auto' ? (isMobile ? 'compact' : 'default') : size;\n  const buttonSize = actualSize === 'compact' ? 'h-8 w-8' : 'h-9 w-9';\n  const iconSize = actualSize === 'compact' ? 'h-3.5 w-3.5' : 'h-4 w-4';\n\n  if (!mounted) {\n    return (\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(buttonSize, className)}\n        disabled\n      >\n        <Sun className={iconSize} />\n        <span className=\"sr-only\">Toggle theme</span>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={toggleTheme}\n      className={cn(buttonSize, className)}\n      title={`Switch to ${resolvedTheme === 'light' ? 'dark' : 'light'} theme`}\n    >\n      {resolvedTheme === 'light' ? (\n        <Sun className={iconSize} />\n      ) : (\n        <Moon className={iconSize} />\n      )}\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  );\n}\n","/**\n * ForceTheme - Force a specific theme for a section\n *\n * Wraps content to override the global theme setting.\n * Works by adding both the theme class and inline CSS variables\n * to ensure proper theme application regardless of parent context.\n */\n\n'use client';\n\nimport React, { ReactNode } from 'react';\n\nimport { cn } from '@djangocfg/ui-core/lib';\n\ninterface ForceThemeProps {\n  theme: 'light' | 'dark';\n  children: ReactNode;\n  className?: string;\n}\n\n// Dark theme CSS variables\nconst darkThemeVars = {\n  // Base HSL values\n  '--background': '0 0% 4%',\n  '--foreground': '0 0% 98%',\n  '--card': '0 0% 8%',\n  '--card-foreground': '0 0% 98%',\n  '--popover': '0 0% 12%',\n  '--popover-foreground': '0 0% 98%',\n  '--primary': '217 91% 60%',\n  '--primary-foreground': '0 0% 100%',\n  '--secondary': '0 0% 98%',\n  '--secondary-foreground': '0 0% 9%',\n  '--muted': '0 0% 10%',\n  '--muted-foreground': '0 0% 60%',\n  '--accent': '0 0% 15%',\n  '--accent-foreground': '0 0% 98%',\n  '--destructive': '0 84% 60%',\n  '--destructive-foreground': '0 0% 98%',\n  '--border': '0 0% 15%',\n  '--input': '0 0% 15%',\n  '--ring': '217 91% 60%',\n  // Tailwind color tokens (used by bg-*, text-*, etc)\n  '--color-background': 'hsl(0 0% 4%)',\n  '--color-foreground': 'hsl(0 0% 98%)',\n  '--color-card': 'hsl(0 0% 8%)',\n  '--color-card-foreground': 'hsl(0 0% 98%)',\n  '--color-primary': 'hsl(217 91% 60%)',\n  '--color-primary-foreground': 'hsl(0 0% 100%)',\n  '--color-secondary': 'hsl(0 0% 98%)',\n  '--color-secondary-foreground': 'hsl(0 0% 9%)',\n  '--color-muted': 'hsl(0 0% 10%)',\n  '--color-muted-foreground': 'hsl(0 0% 60%)',\n  '--color-accent': 'hsl(0 0% 15%)',\n  '--color-accent-foreground': 'hsl(0 0% 98%)',\n  '--color-destructive': 'hsl(0 84% 60%)',\n  '--color-destructive-foreground': 'hsl(0 0% 98%)',\n  '--color-border': 'hsl(0 0% 15%)',\n  '--color-input': 'hsl(0 0% 15%)',\n  '--color-ring': 'hsl(217 91% 60%)',\n} as React.CSSProperties;\n\n// Light theme CSS variables\nconst lightThemeVars = {\n  // Base HSL values\n  '--background': '0 0% 96%',\n  '--foreground': '0 0% 9%',\n  '--card': '0 0% 100%',\n  '--card-foreground': '0 0% 9%',\n  '--popover': '0 0% 100%',\n  '--popover-foreground': '0 0% 9%',\n  '--primary': '217 91% 60%',\n  '--primary-foreground': '0 0% 100%',\n  '--secondary': '0 0% 9%',\n  '--secondary-foreground': '0 0% 98%',\n  '--muted': '0 0% 96%',\n  '--muted-foreground': '0 0% 40%',\n  '--accent': '0 0% 92%',\n  '--accent-foreground': '0 0% 9%',\n  '--destructive': '0 84% 60%',\n  '--destructive-foreground': '0 0% 98%',\n  '--border': '0 0% 90%',\n  '--input': '0 0% 90%',\n  '--ring': '217 91% 60%',\n  // Tailwind color tokens (used by bg-*, text-*, etc)\n  '--color-background': 'hsl(0 0% 96%)',\n  '--color-foreground': 'hsl(0 0% 9%)',\n  '--color-card': 'hsl(0 0% 100%)',\n  '--color-card-foreground': 'hsl(0 0% 9%)',\n  '--color-primary': 'hsl(217 91% 60%)',\n  '--color-primary-foreground': 'hsl(0 0% 100%)',\n  '--color-secondary': 'hsl(0 0% 9%)',\n  '--color-secondary-foreground': 'hsl(0 0% 98%)',\n  '--color-muted': 'hsl(0 0% 96%)',\n  '--color-muted-foreground': 'hsl(0 0% 40%)',\n  '--color-accent': 'hsl(0 0% 92%)',\n  '--color-accent-foreground': 'hsl(0 0% 9%)',\n  '--color-destructive': 'hsl(0 84% 60%)',\n  '--color-destructive-foreground': 'hsl(0 0% 98%)',\n  '--color-border': 'hsl(0 0% 90%)',\n  '--color-input': 'hsl(0 0% 90%)',\n  '--color-ring': 'hsl(217 91% 60%)',\n} as React.CSSProperties;\n\nexport function ForceTheme({ theme, children, className }: ForceThemeProps) {\n  const themeVars = theme === 'dark' ? darkThemeVars : lightThemeVars;\n\n  return (\n    <div\n      className={cn(theme, className)}\n      style={themeVars}\n    >\n      {children}\n    </div>\n  );\n}\n"]}