@space-man/react-theme-animation 1.0.2 → 1.0.3

package/README.md

@@ -43,16 +43,16 @@ Perfect for custom theme toggle buttons and complete control over animated theme
 ### Basic Theme Toggle
 
 ```tsx
-import { useThemeAnimation } from '@space-man/react-theme-animation';
+import { useThemeAnimation } from '@space-man/react-theme-animation'
 
 function ThemeToggle() {
-  const { theme, toggleTheme, ref } = useThemeAnimation();
+  const { theme, toggleTheme, ref } = useThemeAnimation()
 
   return (
     <button ref={ref} onClick={toggleTheme} className="theme-toggle-btn">
       {theme === 'light' ? '🌙' : '🌞'} {theme}
     </button>
-  );
+  )
 }
 ```
 
@@ -69,7 +69,7 @@ import {
   SpacemanThemeProvider,
   ThemeSwitcher,
   ThemeSelector,
-} from '@space-man/react-theme-animation';
+} from '@space-man/react-theme-animation'
 
 function App() {
   return (
@@ -88,7 +88,7 @@ function App() {
         </main>
       </div>
     </SpacemanThemeProvider>
-  );
+  )
 }
 ```
 
@@ -135,7 +135,7 @@ Hook to access theme state from SpacemanThemeProvider context.
 
 ```tsx
 const { theme, colorTheme, switchTheme, setColorTheme, switchThemeFromElement, ref } =
-  useSpacemanTheme();
+  useSpacemanTheme()
 ```
 
 #### Returns
@@ -161,7 +161,7 @@ const { theme, colorTheme, switchTheme, setColorTheme, toggleTheme, ref } = useT
   duration: 800,
   onThemeChange: theme => console.log('Theme changed:', theme),
   onColorThemeChange: colorTheme => console.log('Color changed:', colorTheme),
-});
+})
 ```
 
 #### Options
@@ -258,59 +258,59 @@ enum ThemeAnimationType {
 ### Types
 
 ```tsx
-type Theme = 'light' | 'dark' | 'system';
-type ColorTheme = string; // e.g., 'default', 'blue', 'green', etc.
+type Theme = 'light' | 'dark' | 'system'
+type ColorTheme = string // e.g., 'default', 'blue', 'green', etc.
 
 interface SpacemanThemeProviderProps {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  defaultColorTheme?: ColorTheme;
-  themes?: Theme[];
-  colorThemes?: ColorTheme[];
-  animationType?: ThemeAnimationType;
-  duration?: number;
-  blurAmount?: number;
-  onThemeChange?: (theme: Theme) => void;
-  onColorThemeChange?: (colorTheme: ColorTheme) => void;
+  children: React.ReactNode
+  defaultTheme?: Theme
+  defaultColorTheme?: ColorTheme
+  themes?: Theme[]
+  colorThemes?: ColorTheme[]
+  animationType?: ThemeAnimationType
+  duration?: number
+  blurAmount?: number
+  onThemeChange?: (theme: Theme) => void
+  onColorThemeChange?: (colorTheme: ColorTheme) => void
 }
 
 interface UseThemeAnimationProps {
-  themes?: Theme[];
-  colorThemes?: ColorTheme[];
-  theme?: Theme;
-  colorTheme?: ColorTheme;
-  animationType?: ThemeAnimationType;
-  duration?: number;
-  blurAmount?: number;
-  onThemeChange?: (theme: Theme) => void;
-  onColorThemeChange?: (colorTheme: ColorTheme) => void;
+  themes?: Theme[]
+  colorThemes?: ColorTheme[]
+  theme?: Theme
+  colorTheme?: ColorTheme
+  animationType?: ThemeAnimationType
+  duration?: number
+  blurAmount?: number
+  onThemeChange?: (theme: Theme) => void
+  onColorThemeChange?: (colorTheme: ColorTheme) => void
 }
 
 interface UseThemeAnimationReturn {
-  theme: Theme;
-  colorTheme: ColorTheme;
-  switchTheme: (theme: Theme) => Promise<void>;
-  setColorTheme: (colorTheme: ColorTheme) => void;
-  toggleTheme: () => Promise<void>;
-  ref: RefObject<HTMLElement>;
+  theme: Theme
+  colorTheme: ColorTheme
+  switchTheme: (theme: Theme) => Promise<void>
+  setColorTheme: (colorTheme: ColorTheme) => void
+  toggleTheme: () => Promise<void>
+  ref: RefObject<HTMLElement>
 }
 
 interface ThemeSwitcherProps {
-  themes?: Theme[];
-  currentTheme?: Theme;
-  onThemeChange?: (theme: Theme) => void;
-  animationType?: ThemeAnimationType;
-  duration?: number;
-  className?: string;
+  themes?: Theme[]
+  currentTheme?: Theme
+  onThemeChange?: (theme: Theme) => void
+  animationType?: ThemeAnimationType
+  duration?: number
+  className?: string
 }
 
 interface ThemeSelectorProps {
-  themes?: Theme[];
-  colorThemes?: ColorTheme[];
-  currentColorTheme?: ColorTheme;
-  onColorThemeChange?: (colorTheme: ColorTheme) => void;
-  animationType?: ThemeAnimationType;
-  duration?: number;
+  themes?: Theme[]
+  colorThemes?: ColorTheme[]
+  currentColorTheme?: ColorTheme
+  onColorThemeChange?: (colorTheme: ColorTheme) => void
+  animationType?: ThemeAnimationType
+  duration?: number
 }
 ```
 

package/dist/cjs/components/ThemeSelector.js

@@ -24,9 +24,9 @@ const ThemeSelector = ({ themes = ['light', 'dark', 'system'], colorThemes = ['d
         onColorThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { colorTheme, setColorTheme } = isControlled ?
-        { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme } :
-        standaloneHook;
+    const { colorTheme, setColorTheme } = isControlled
+        ? { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme }
+        : standaloneHook;
     const handleColorThemeChange = (newColorTheme) => {
         setColorTheme(newColorTheme);
         // Also call the callback if provided

package/dist/cjs/components/ThemeSwitcher.js

@@ -11,7 +11,7 @@ const SunIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16
 const MoonIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
 const MonitorIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "16", y1: "21", y2: "21" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", x2: "12", y1: "17", y2: "21" })] }));
 const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter, onMouseLeave, buttonRef, }) => {
-    return ((0, jsx_runtime_1.jsxs)("button", { ref: isActive ? buttonRef : undefined, className: (0, clsx_1.clsx)('relative flex h-9 w-12 cursor-pointer items-center justify-center transition-all duration-200 ease-in-out', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: (event) => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: isActive ? buttonRef : undefined, className: (0, clsx_1.clsx)('relative flex h-9 w-12 cursor-pointer items-center justify-center transition-all duration-200 ease-in-out', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: event => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
             borderRadius: 'var(--radius)',
         }, children: [isHovered && ((0, jsx_runtime_1.jsx)(react_2.motion.div, { layoutId: "theme-hover-bg", className: "absolute inset-0 bg-muted backdrop-blur-sm", style: {
                     borderRadius: 'var(--radius)',
@@ -67,9 +67,9 @@ const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentTheme, onT
         onThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { ref, theme, switchTheme } = isControlled ?
-        { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme } :
-        standaloneHook;
+    const { ref, theme, switchTheme } = isControlled
+        ? { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme }
+        : standaloneHook;
     const [isMounted, setIsMounted] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         setIsMounted(true);

package/dist/cjs/components/ui/select.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
 declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
+    size?: 'sm' | 'default';
 }): import("react/jsx-runtime").JSX.Element;
 declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ui/select.js

@@ -58,26 +58,26 @@ function SelectValue({ ...props }) {
 const ChevronDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m6 9 6 6 6-6" }) }));
 const ChevronUpIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m18 15-6-6-6 6" }) }));
 const CheckIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M20 6 9 17l-5-5" }) }));
-function SelectTrigger({ className, size = "default", children, ...props }) {
+function SelectTrigger({ className, size = 'default', children, ...props }) {
     return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: (0, clsx_1.clsx)("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) })] }));
 }
-function SelectContent({ className, children, position = "popper", ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Content, { "data-slot": "select-content", className: (0, clsx_1.clsx)("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, clsx_1.clsx)("p-1", position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }) }) }));
+function SelectContent({ className, children, position = 'popper', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Content, { "data-slot": "select-content", className: (0, clsx_1.clsx)('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, clsx_1.clsx)('p-1', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }) }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { "data-slot": "select-label", className: (0, clsx_1.clsx)("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { "data-slot": "select-label", className: (0, clsx_1.clsx)('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
     return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Item, { "data-slot": "select-item", className: (0, clsx_1.clsx)("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(CheckIcon, {}) }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Separator, { "data-slot": "select-separator", className: (0, clsx_1.clsx)("-mx-1 my-1 h-px bg-muted", className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Separator, { "data-slot": "select-separator", className: (0, clsx_1.clsx)('-mx-1 my-1 h-px bg-muted', className), ...props }));
 }
 function SelectScrollUpButton({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: (0, clsx_1.clsx)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronUpIcon, {}) }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: (0, clsx_1.clsx)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronUpIcon, {}) }));
 }
 function SelectScrollDownButton({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: (0, clsx_1.clsx)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: (0, clsx_1.clsx)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) }));
 }

package/dist/esm/components/ThemeSelector.js

@@ -21,9 +21,9 @@ export const ThemeSelector = ({ themes = ['light', 'dark', 'system'], colorTheme
         onColorThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { colorTheme, setColorTheme } = isControlled ?
-        { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme } :
-        standaloneHook;
+    const { colorTheme, setColorTheme } = isControlled
+        ? { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme }
+        : standaloneHook;
     const handleColorThemeChange = (newColorTheme) => {
         setColorTheme(newColorTheme);
         // Also call the callback if provided

package/dist/esm/components/ThemeSwitcher.js

@@ -8,7 +8,7 @@ const SunIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 2
 const MoonIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
 const MonitorIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }), _jsx("line", { x1: "8", x2: "16", y1: "21", y2: "21" }), _jsx("line", { x1: "12", x2: "12", y1: "17", y2: "21" })] }));
 const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter, onMouseLeave, buttonRef, }) => {
-    return (_jsxs("button", { ref: isActive ? buttonRef : undefined, className: clsx('relative flex h-9 w-12 cursor-pointer items-center justify-center transition-all duration-200 ease-in-out', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: (event) => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
+    return (_jsxs("button", { ref: isActive ? buttonRef : undefined, className: clsx('relative flex h-9 w-12 cursor-pointer items-center justify-center transition-all duration-200 ease-in-out', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: event => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
             borderRadius: 'var(--radius)',
         }, children: [isHovered && (_jsx(motion.div, { layoutId: "theme-hover-bg", className: "absolute inset-0 bg-muted backdrop-blur-sm", style: {
                     borderRadius: 'var(--radius)',
@@ -64,9 +64,9 @@ export const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentThe
         onThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { ref, theme, switchTheme } = isControlled ?
-        { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme } :
-        standaloneHook;
+    const { ref, theme, switchTheme } = isControlled
+        ? { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme }
+        : standaloneHook;
     const [isMounted, setIsMounted] = useState(false);
     useEffect(() => {
         setIsMounted(true);

package/dist/esm/components/ui/select.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
 declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
+    size?: 'sm' | 'default';
 }): import("react/jsx-runtime").JSX.Element;
 declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ui/select.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { clsx } from "clsx";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { clsx } from 'clsx';
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -13,27 +13,27 @@ function SelectValue({ ...props }) {
 const ChevronDownIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
 const ChevronUpIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m18 15-6-6-6 6" }) }));
 const CheckIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
-function SelectTrigger({ className, size = "default", children, ...props }) {
+function SelectTrigger({ className, size = 'default', children, ...props }) {
     return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: clsx("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }));
 }
-function SelectContent({ className, children, position = "popper", ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { "data-slot": "select-content", className: clsx("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: _jsx(SelectPrimitive.Viewport, { className: clsx("p-1", position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }) }) }));
+function SelectContent({ className, children, position = 'popper', ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { "data-slot": "select-content", className: clsx('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: _jsx(SelectPrimitive.Viewport, { className: clsx('p-1', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }) }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: clsx("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props }));
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: clsx('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
     return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: clsx("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, {}) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: clsx("-mx-1 my-1 h-px bg-muted", className), ...props }));
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: clsx('-mx-1 my-1 h-px bg-muted', className), ...props }));
 }
 function SelectScrollUpButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: clsx("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, {}) }));
+    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: clsx('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUpIcon, {}) }));
 }
 function SelectScrollDownButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: clsx("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: clsx('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDownIcon, {}) }));
 }
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/package.json

@@ -1,21 +1,28 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "keywords": [
     "react",
-    "reactjs",
-    "hooks",
     "theme",
+    "dark mode",
+    "light mode",
+    "theme switching",
+    "view transitions",
+    "hooks",
     "animation",
     "switch",
     "typescript",
-    "nextjs",
     "dark",
     "light",
     "view-transition",
+    "view-transition-api",
+    "tailwind",
     "tailwindcss",
-    "shadcn"
+    "shadcn",
+    "reactjs",
+    "nextjs",
+    "vite"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -50,6 +57,8 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix . --ext .{js,jsx,ts,tsx}",
     "test": "echo \"Error: no test specified\" && exit 1",
+    "prettier:check": "prettier --check . --config ./.prettierrc",
+    "prettier:fix": "prettier --write . --config ./.prettierrc",
     "changeset": "changeset add --type patch",
     "changeset:patch": "changeset add --type patch",
     "changeset:feature": "changeset add --type minor",