Theme Switch

1// Copyright (c) 2026 raouf.codes - Azemmur
2 
3'use client';
4import { IconSunLow, IconMoon } from '@tabler/icons-react';
5import { cn } from '@/lib/utils';
6import { cva, type VariantProps } from 'class-variance-authority';
7import { motion, AnimatePresence } from 'motion/react';
8import { useTheme } from 'next-themes';
9import { useCallback, useSyncExternalStore } from 'react';
10import { Button as ButtonPrimitive } from '@/components/azemmur/components/primitives/button';
11 
12const emptySubscribe = () => () => {};
13const getSnapshot = () => true;
14const getServerSnapshot = () => false;
15 
16const themeSwitchVariants = cva(
17  [
18    'inline-flex items-center justify-center',
19    'select-none touch-manipulation',
20    'transition-colors',
21    '[&_svg]:pointer-events-none [&_svg]:shrink-0',
22    'disabled:pointer-events-none disabled:opacity-50',
23  ].join(' '),
24  {
25    variants: {
26      intent: {
27        primary: 'bg-primary text-primary border-primary',
28        accent: 'bg-accent text-accent border-accent',
29        secondary: 'bg-secondary text-secondary border-secondary',
30      },
31      size: {
32        sm: 'h-6 w-6 [&_svg]:size-4',
33        md: 'h-8 w-8 [&_svg]:size-5',
34        lg: 'h-10 w-10 [&_svg]:size-6',
35      },
36      styling: {
37        ghost: 'bg-transparent',
38        solid: 'border-none',
39        outline: 'border border-2 bg-transparent hover:bg-current/20',
40      },
41      shape: {
42        rounded: 'rounded-md',
43        pill: 'rounded-full',
44        sharp: 'rounded-none',
45      },
46      elevation: {
47        raised: 'shadow-sm hover:shadow-md active:shadow-none',
48        floating: 'shadow-md hover:shadow-lg active:shadow-sm',
49      },
50    },
51    compoundVariants: [
52      {
53        intent: 'primary',
54        styling: 'solid',
55        className: 'text-primary-foreground',
56      },
57      {
58        intent: 'accent',
59        styling: 'solid',
60        className: 'text-accent-foreground',
61      },
62      {
63        intent: 'secondary',
64        styling: 'solid',
65        className: 'text-secondary-foreground',
66      },
67      {
68        styling: 'ghost',
69        className: 'shadow-none hover:shadow-none active:shadow-none',
70      },
71    ],
72    defaultVariants: {
73      intent: 'primary',
74      size: 'md',
75      styling: 'ghost',
76      shape: 'pill',
77      elevation: 'raised',
78    },
79  },
80);
81 
82type ThemeSwitchProps = VariantProps<typeof themeSwitchVariants> & {
83  className?: string;
84};
85 
86function ThemeSwitch({
87  className,
88  size,
89  styling,
90  intent,
91  shape,
92  elevation,
93  ...props
94// … truncated