@djangocfg/ui-nextjs 2.1.18 → 2.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.18",
+  "version": "2.1.19",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.18",
-    "@djangocfg/ui-core": "^2.1.18",
+    "@djangocfg/api": "^2.1.19",
+    "@djangocfg/ui-core": "^2.1.19",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -104,7 +104,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.18",
+    "@djangocfg/typescript-config": "^2.1.19",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/theme/ThemeToggle.tsx

@@ -8,7 +8,14 @@
  * ```tsx
  * import { ThemeToggle } from '@djangocfg/ui-nextjs';
  *
+ * // Default
  * <ThemeToggle />
+ *
+ * // Compact (for mobile/tight spaces)
+ * <ThemeToggle size="compact" />
+ *
+ * // Custom className
+ * <ThemeToggle className="ml-auto" />
  * ```
  */
 
@@ -17,21 +24,41 @@
 import { useEffect, useState } from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 import { useThemeContext } from './ThemeProvider';
+import { useIsMobile } from '../hooks';
 
-export function ThemeToggle() {
+export interface ThemeToggleProps {
+  /** Custom className */
+  className?: string;
+  /** Size variant (auto-detects mobile if not specified) */
+  size?: 'default' | 'compact' | 'auto';
+}
+
+export function ThemeToggle({ className, size = 'auto' }: ThemeToggleProps) {
   const { resolvedTheme, toggleTheme } = useThemeContext();
   const [mounted, setMounted] = useState(false);
+  const isMobile = useIsMobile();
 
   // Prevent hydration mismatch
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  // 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';
+
   if (!mounted) {
     return (
-      <Button variant="ghost" size="icon" className="h-9 w-9" disabled>
-        <Sun className="h-4 w-4" />
+      <Button
+        variant="ghost"
+        size="icon"
+        className={cn(buttonSize, className)}
+        disabled
+      >
+        <Sun className={iconSize} />
         <span className="sr-only">Toggle theme</span>
       </Button>
     );
@@ -42,13 +69,13 @@ export function ThemeToggle() {
       variant="ghost"
       size="icon"
       onClick={toggleTheme}
-      className="h-9 w-9"
+      className={cn(buttonSize, className)}
       title={`Switch to ${resolvedTheme === 'light' ? 'dark' : 'light'} theme`}
     >
       {resolvedTheme === 'light' ? (
-        <Sun className="h-4 w-4" />
+        <Sun className={iconSize} />
       ) : (
-        <Moon className="h-4 w-4" />
+        <Moon className={iconSize} />
       )}
       <span className="sr-only">Toggle theme</span>
     </Button>