@space-man/react-theme-animation 2.1.0 → 3.0.0

package/README.md

@@ -1,32 +1,35 @@
 # @space-man/react-theme-animation
 
-https://github.com/user-attachments/assets/2819cf70-c474-478e-b821-6b26457c8d4a
-
 React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
 
-## What's New in v2.1
+## Module support
+
+This package ships ESM only. Use `import` or dynamic `import()` instead of
+`require()`. TypeScript declarations are included. The package does not ship
+source maps. Both built-in controls and their required dependencies remain
+available through the existing exports.
+
+## Spaceman React Theme Animation v2 release
+
+Version 2 moves the library into a workspace-friendly monorepo, keeps the published package name stable, and standardizes the public API around flat root imports.
 
-- **animationOff Parameter**: Instantly switch themes without animation via optional parameter on all toggle functions
-- **Universal SSR Support**: Pre-hydration script prevents flash in Next.js, Remix, and SSR frameworks
-- **Three Framework-Specific Providers**: NextThemeProvider (SSR/Next.js), TanStackThemeProvider (TanStack Start), ViteThemeProvider (Vite SPAs)
-- **Consistent Hook API**: All providers expose identical hook interface with 15+ methods
-- **Enhanced Theme Control**: Direct functions for toggleLightTheme(), toggleDarkTheme(), createColorThemeToggle()
+Highlights in this release:
 
-## Live Demo
+- root-first public API via `@space-man/react-theme-animation`
+- framework-specific providers for Next.js, TanStack Start, and Vite
+- TanStack SSR helpers exposed from the root package
+- workspace examples for Next.js, TanStack Start, and TanStack Start SSR
+- build and packaging updates for ESM and declaration output
 
-[View Live Demo](https://spaceman-rta-vite.netlify.app/)
+## Required dependencies
 
-## Features
+Radix Select, Motion, React, and React DOM remain required peer dependencies. `clsx` remains a direct dependency. Keep compatible peers installed even when the application uses only hooks. The controls remain included in this package.
 
-- Smooth view transition animations with customizable origins
-- Multi-theme support (light, dark, system)
-- Color theme variants (brand colors, custom themes)
-- Three framework-optimized providers
-- Powerful useThemeAnimation hook for custom implementations
-- Ready-to-use ThemeSwitcher and ThemeSelector components
-- State synchronization across components
-- Full TypeScript support
-- Performance optimized with reduced motion support
+The planned v3 release requires React and React DOM 18 or newer, Motion 12 or newer, and Radix Select 2 or newer. React 17 is no longer supported. Extracted-package checks cover React 18.0, Motion 12.0, and Radix 2.0 together, plus the current development versions. See the [readiness audit](https://github.com/tonyedgal/spaceman-react-theme-animation/blob/main/docs/release-readiness.md) for release evidence.
+
+Storage is optional persistence. Blocked reads use the configured defaults. Failed writes still update the theme for the current page. Saved preferences become visible after hydration, so the first client render matches the server HTML.
+
+`ThemeSelector` applies `className`, `placeholder`, and `colorThemeLabel`. The label is linked to the dropdown trigger. Its `onColorThemeChange` callback also runs inside a provider. `themeLabel` is deprecated because this control selects palettes; use `ThemeSwitcher` for light, dark, and system modes.
 
 ## Installation
 
@@ -34,26 +37,70 @@ React theme switching with smooth view transition animations, multi-theme suppor
 npm install @space-man/react-theme-animation
 ```
 
+```bash
+pnpm add @space-man/react-theme-animation
+```
+
+```bash
+yarn add @space-man/react-theme-animation
+```
+
+## Imports
+
+Import everything from the package root:
+
+```tsx
+import {
+  NextThemeProvider,
+  TanStackThemeProvider,
+  ViteThemeProvider,
+  ThemeSwitcher,
+  ThemeSelector,
+  useThemeAnimation,
+} from '@space-man/react-theme-animation'
+```
+
+The root is the documented client API. Existing subpath exports remain. Use `/tanstack` for server cookie helpers and `/core` for server utilities. The root entry also imports the React controls and Motion; it is not a server-only entry.
+
+For Next.js App Router, import providers/hooks from the package root inside client components. A
+typical setup is a local `app/providers.tsx` file with `'use client'`, rendered by the server
+`app/layout.tsx`.
+
+## Tailwind Setup For Prebuilt Components
+
+`ThemeSwitcher`, `ThemeSelector`, and the bundled select primitives use Tailwind utility classes. The package does not ship a compiled stylesheet for those components, so the consuming app must include the installed package in Tailwind's source scan.
+
+For Tailwind v4, add an `@source` directive next to your Tailwind import:
+
+```css
+@import 'tailwindcss';
+@source '../node_modules/@space-man/react-theme-animation/dist';
+```
+
+Adjust the relative path to match your app structure.
+
 ## Provider Selection
 
 Choose the right provider for your framework:
 
-| Provider              | Best For                       | Key Features                                     |
-| --------------------- | ------------------------------ | ------------------------------------------------ |
-| NextThemeProvider     | Next.js, Remix, SSR frameworks | Pre-hydration script, CSP support, animations    |
-| TanStackThemeProvider | TanStack Start apps            | Isomorphic rendering, useHydrated() integration  |
-| ViteThemeProvider     | Vite React SPAs                | Lightweight, transition control, no SSR overhead |
+| Provider              | Best For                       | Key Features                                      |
+| --------------------- | ------------------------------ | ------------------------------------------------- |
+| SpacemanThemeProvider | General React apps             | Universal provider with synchronized theme state  |
+| NextThemeProvider     | Next.js, Remix, SSR frameworks | Pre-hydration script, CSP support, animations     |
+| TanStackThemeProvider | TanStack Start apps            | Cookie SSR, pre-hydration script, system CSS mode |
+| ViteThemeProvider     | Vite React SPAs                | Lightweight, transition control, no SSR overhead  |
 
 ## Quick Start
 
-Basic pattern that works across all providers:
-
 ```tsx
-import { SpacemanThemeProvider, useSpacemanTheme } from '@space-man/react-theme-animation'
+import {
+  SpacemanThemeProvider,
+  useSpacemanTheme,
+} from '@space-man/react-theme-animation'
 
 function App() {
   return (
-    <SpacemanThemeProvider defaultTheme="system" defaultColorTheme="default">
+    <SpacemanThemeProvider defaultTheme='system' defaultColorTheme='default'>
       <YourApp />
     </SpacemanThemeProvider>
   )
@@ -70,149 +117,53 @@ function ThemeToggle() {
 }
 ```
 
-**Choose your framework setup guide:**
+## Documentation
 
-- **[Next.js / SSR Setup Guide](./docs/nextjs-setup.md)** - Complete guide with App Router, Pages Router, CSP support
-- **[TanStack Start Setup Guide](./docs/tanstack-start-setup.md)** - Isomorphic rendering, hydration-safe patterns
-- **[Vite React SPA Setup Guide](./docs/vite-setup.md)** - Client-side setup, flash prevention, routing
+Repository documentation, framework guides, migration notes, and examples are linked from the GitHub docs hub:
 
-**[View Complete Examples](./example/)** - Next.js implementation with both hook and provider patterns
+- https://github.com/tonyedgal/spaceman-react-theme-animation#documentation
 
 ## API Reference
 
 ### Shared Hook Return (All Providers)
 
-All providers expose the same hook interface:
-
-| Property               | Type                                                    | Description                        |
-| ---------------------- | ------------------------------------------------------- | ---------------------------------- |
-| theme                  | Theme                                                   | Current theme                      |
-| colorTheme             | ColorTheme                                              | Current color theme                |
-| resolvedTheme          | 'light' \| 'dark'                                       | Resolved theme (system → actual)   |
-| systemTheme            | 'light' \| 'dark'                                       | OS theme preference                |
-| ref                    | RefObject<HTMLElement>                                  | Ref for animation origin           |
-| setTheme               | (theme: Theme) => void                                  | Set theme instantly                |
-| setColorTheme          | (colorTheme: ColorTheme) => void                        | Set color theme                    |
-| switchTheme            | (theme: Theme, animationOff?: boolean) => Promise<void> | Switch with animation              |
-| switchColorTheme       | (colorTheme: string) => void                            | Switch color theme with animation  |
-| toggleTheme            | (animationOff?: boolean) => Promise<void>               | Toggle light/dark                  |
-| toggleLightTheme       | (animationOff?: boolean) => Promise<void>               | Toggle to light                    |
-| toggleDarkTheme        | (animationOff?: boolean) => Promise<void>               | Toggle to dark                     |
-| toggleColorTheme       | () => void                                              | Toggle between color themes        |
-| createColorThemeToggle | (colorTheme: string) => () => void                      | Create color theme toggle          |
-| isColorThemeActive     | (colorTheme: string) => boolean                         | Check if color theme active        |
-| switchThemeFromElement | (theme: Theme, element: HTMLElement) => Promise<void>   | Switch with animation from element |
-
-### Provider Props
-
-| Prop                      | Spaceman | NextTheme | TanStack | Vite | Type               | Default                     |
-| ------------------------- | -------- | --------- | -------- | ---- | ------------------ | --------------------------- |
-| defaultTheme              | ✓        | ✓         | ✓        | ✓    | Theme              | 'system'                    |
-| defaultColorTheme         | ✓        | ✓         | ✓        | ✓    | ColorTheme         | 'default'                   |
-| themes                    | ✓        | ✓         | ✓        | ✓    | Theme[]            | ['light', 'dark', 'system'] |
-| colorThemes               | ✓        | ✓         | ✓        | ✓    | ColorTheme[]       | ['default']                 |
-| animationType             | ✓        | ✓         | ✓        | ✓    | ThemeAnimationType | CIRCLE                      |
-| duration                  | ✓        | ✓         | ✓        | ✓    | number             | 500                         |
-| storageKey                | ✓        | ✓         | ✓        | ✓    | string             | varies                      |
-| colorStorageKey           | ✓        | ✓         | ✓        | ✓    | string             | varies                      |
-| nonce                     | ✗        | ✓         | ✗        | ✗    | string             | -                           |
-| disablePreHydrationScript | ✗        | ✓         | ✗        | ✗    | boolean            | false                       |
-| disableTransitionOnChange | ✗        | ✗         | ✗        | ✓    | boolean            | false                       |
-| onThemeChange             | ✓        | ✓         | ✓        | ✓    | function           | -                           |
-| onColorThemeChange        | ✓        | ✓         | ✓        | ✓    | function           | -                           |
-
-### Components
-
-**ThemeSwitcher**: Pre-built theme toggle buttons with animations  
-**ThemeSelector**: Dropdown selector for color themes
-
-See framework-specific guides for component usage examples.
-
----
-
-<details>
-<summary>CSS Variables Setup</summary>
-
-Define theme variables in your global CSS file:
-
-```css
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --primary: 221.2 83.2% 53.3%;
-}
-
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 59.8%;
-}
-
-/* Color theme variants */
-.theme-blue {
-  --primary: 221.2 83.2% 53.3%;
-}
-
-.theme-blue.dark {
-  --primary: 217.2 91.2% 59.8%;
-}
-
-.theme-green {
-  --primary: 142.1 76.2% 36.3%;
-}
-
-.theme-green.dark {
-  --primary: 142.1 70.6% 45.3%;
-}
-```
-
-</details>
-
-<details>
-<summary>Browser Support</summary>
-
-- View Transitions API: Chrome 111+, Edge 111+
-- Fallback: All modern browsers with CSS transitions
-- Reduced Motion: Respects prefers-reduced-motion
-- Framework Support: React 16.8+ (hooks required)
-
-</details>
-
-<details>
-<summary>Advanced Configuration</summary>
-
-### Animation Control
-
-```tsx
-const { switchTheme, toggleTheme } = useSpacemanTheme()
-
-// With animation (default)
-await switchTheme('dark')
-
-// Without animation
-await switchTheme('dark', true)
-await toggleTheme(true)
-```
-
-### Custom Hook Usage
-
-```tsx
-import { useThemeAnimation } from '@space-man/react-theme-animation'
-
-const { theme, toggleTheme, ref } = useThemeAnimation({
-  animationType: ThemeAnimationType.BLUR_CIRCLE,
-  duration: 750,
-  colorThemes: ['default', 'blue', 'green'],
-  onThemeChange: theme => console.log('Theme:', theme),
-})
-```
-
-</details>
-
-## Contributing
-
-Fork the repository, make your changes, and submit a merge request for review.
+All providers expose the same core hook interface:
+
+| Property               | Type                                                                  | Description                        |
+| ---------------------- | --------------------------------------------------------------------- | ---------------------------------- |
+| theme                  | Theme                                                                 | Current theme                      |
+| colorTheme             | ColorTheme                                                            | Current color theme                |
+| resolvedTheme          | 'light' \| 'dark'                                                     | Resolved theme (system → actual)   |
+| systemTheme            | 'light' \| 'dark'                                                     | OS theme preference                |
+| ref                    | RefObject<HTMLButtonElement \| null>                                  | Ref for animation origin           |
+| setTheme               | (theme: Theme) => void                                                | Set theme instantly                |
+| setColorTheme          | (colorTheme: ColorTheme) => void                                      | Set color theme                    |
+| switchTheme            | (theme: Theme, options?: ThemeTransitionInput) => Promise<void>       | Switch with animation              |
+| switchColorTheme       | (colorTheme: string, options?: ThemeTransitionInput) => Promise<void> | Switch color theme with animation  |
+| toggleTheme            | (options?: ThemeTransitionInput) => Promise<void>                     | Toggle light/dark                  |
+| toggleLightTheme       | (options?: ThemeTransitionInput) => Promise<void>                     | Toggle to light                    |
+| toggleDarkTheme        | (options?: ThemeTransitionInput) => Promise<void>                     | Toggle to dark                     |
+| toggleColorTheme       | ColorThemeToggle                                                      | Toggle between color themes        |
+| createColorThemeToggle | (colorTheme: string) => ColorThemeToggle                              | Create color theme toggle          |
+| isColorThemeActive     | (colorTheme: string) => boolean                                       | Check if color theme active        |
+| switchThemeFromElement | (theme: Theme, element: HTMLButtonElement) => Promise<void>           | Switch with animation from element |
+
+### Root Exports
+
+The root package exports:
+
+- providers and framework hooks
+- prebuilt `ThemeSwitcher` and `ThemeSelector`
+- `useThemeAnimation`
+- shared types and animation utilities
+- TanStack server helpers such as `buildServerThemeData`, `STORAGE_KEY`, and `COLOR_STORAGE_KEY`
+
+See the repository docs hub for provider-specific setup guides and examples.
 
 ## License
 
 MIT
+
+## Additional transition effects
+
+See [Theme transitions](https://github.com/tonyedgal/spaceman-react-theme-animation/blob/main/packages/react-theme-animation/docs/theme-transitions.md) for animated palettes, explicit origins, directional polygon wipes, triangles, and stationary SVG logos with destination assets and automatic sizing.

package/dist/animations-CaaRrn3-.d.ts

@@ -0,0 +1,208 @@
+import { RefObject } from 'react';
+
+declare enum ThemeAnimationType {
+    CIRCLE = "circle",
+    BLUR_CIRCLE = "blur-circle",
+    SLIDE = "slide",
+    CLIP_PATH = "clip-path",
+    POLYGON_GRADIENT = "polygon-gradient",
+    TRIANGLE = "triangle",
+    SVG_LOGO = "svg-logo"
+}
+type SlideDirection = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** Clockwise from the top-left corner. */
+declare const TRANSITION_DIRECTIONS: readonly ["top-left", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left"];
+type TransitionDirection = (typeof TRANSITION_DIRECTIONS)[number];
+type AnimationPosition = TransitionDirection | 'center' | 'trigger';
+interface ThemeAnimationSettings {
+    /** Starting edge/corner for polygon wipes. Defaults to top-left. */
+    readonly clipPathDirection?: TransitionDirection;
+    /** Fixed circle/triangle origin; SVG_LOGO always uses the viewport center. */
+    readonly animationPosition?: AnimationPosition;
+    /** Stationary logo width in CSS pixels or auto; default is 96 when both are omitted. */
+    readonly logoWidth?: number | 'auto';
+    /** Logo height in CSS pixels or auto; omitted dimensions preserve the SVG aspect ratio. */
+    readonly logoHeight?: number | 'auto';
+    /** Gradient wipe feather in CSS pixels; defaults to 80. */
+    readonly gradientWidth?: number;
+}
+/** Choose one shared asset, or both destination-specific assets. */
+type ThemeLogoOptions = {
+    readonly logo?: string;
+    readonly logoLight?: never;
+    readonly logoDark?: never;
+} | {
+    readonly logo?: never;
+    readonly logoLight: string;
+    readonly logoDark: string;
+};
+type ThemeAnimationOptions = ThemeAnimationSettings & ThemeLogoOptions;
+interface AnimationConfig extends ThemeAnimationSettings {
+    /** Asset already selected for the destination theme before capture. */
+    readonly logo?: string;
+    readonly a?: number;
+    readonly b?: number;
+    readonly x: number;
+    readonly y: number;
+    readonly duration: number;
+    readonly easing: string;
+    readonly animationType: ThemeAnimationType;
+    readonly blurAmount: number;
+    readonly styleId: string;
+}
+type Theme = 'light' | 'dark' | 'system';
+type ColorTheme = string;
+type SystemThemeMode = 'css' | 'js';
+type UseThemeAnimationProps = ThemeAnimationOptions & {
+    readonly duration?: number;
+    readonly easing?: string;
+    readonly animationType?: ThemeAnimationType;
+    readonly blurAmount?: number;
+    readonly styleId?: string;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly globalClassName?: string;
+    readonly colorThemePrefix?: string;
+    readonly attribute?: 'class' | 'data-theme';
+    readonly value?: Record<string, string>;
+    readonly enableColorScheme?: boolean;
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly theme?: Theme;
+    readonly colorTheme?: ColorTheme;
+    readonly onThemeChange?: (theme: Theme) => void;
+    readonly onColorThemeChange?: (colorTheme: ColorTheme) => void;
+    readonly initialTheme?: Theme;
+    readonly initialColorTheme?: ColorTheme;
+    readonly systemThemeMode?: SystemThemeMode;
+    readonly slideDirection?: SlideDirection;
+    readonly slideFromX?: number;
+    readonly slideFromY?: number;
+    readonly slideToX?: number;
+    readonly slideToY?: number;
+};
+/** Per-call animation controls shared by all providers. */
+interface ThemeTransitionOptions {
+    /** Skip the view transition (also automatically skipped for reduced motion). */
+    readonly animationOff?: boolean;
+    /** Trigger element; its viewport rectangle is read synchronously. */
+    readonly element?: Element | null;
+    /** Viewport-relative CSS pixels. Never multiply these coordinates by DPR. */
+    readonly origin?: {
+        readonly x: number;
+        readonly y: number;
+    };
+}
+/** Boolean arguments remain supported for backward compatibility. */
+type ThemeTransitionInput = boolean | ThemeTransitionOptions;
+type ColorThemeToggle = (options?: ThemeTransitionInput | Pick<React.MouseEvent<HTMLElement>, 'currentTarget' | 'detail'>) => Promise<void>;
+interface UseThemeAnimationReturn {
+    readonly ref: RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly systemTheme: 'light' | 'dark';
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+}
+type ThemeSwitcherProps = ThemeAnimationOptions & {
+    readonly themes?: readonly Theme[];
+    readonly currentTheme?: Theme;
+    readonly onThemeChange?: (theme: Theme) => void;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly className?: string;
+    readonly size?: 'sm' | 'md' | 'lg';
+    readonly variant?: 'default' | 'outline' | 'ghost';
+    readonly icons?: {
+        readonly light?: React.ReactNode;
+        readonly dark?: React.ReactNode;
+        readonly system?: React.ReactNode;
+    };
+};
+type ThemeSelectorProps = ThemeAnimationOptions & {
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly currentTheme?: Theme;
+    readonly currentColorTheme?: ColorTheme;
+    readonly onThemeChange?: (theme: Theme) => void;
+    readonly onColorThemeChange?: (colorTheme: ColorTheme) => void;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly className?: string;
+    readonly placeholder?: string;
+    /** @deprecated This selector changes palettes only. Use ThemeSwitcher for mode controls. */
+    readonly themeLabel?: string;
+    readonly colorThemeLabel?: string;
+};
+
+/** Injects styles scoped to transitions owned by this library. */
+declare const injectBaseStyles: () => void;
+/**
+ * Gets the system theme preference
+ * @returns 'light' or 'dark' based on system preference
+ */
+declare const getSystemTheme: () => "light" | "dark";
+/**
+ * Resolves a theme value to its actual light/dark value
+ * @param theme - Theme to resolve ('light', 'dark', or 'system')
+ * @returns Resolved theme ('light' or 'dark')
+ */
+declare const resolveTheme: (theme: string) => "light" | "dark";
+/**
+ * Resolves a stored theme to the server-side class to apply on <html>.
+ * CSS mode uses the 'system' class so media queries can respond before hydration.
+ */
+declare const resolveThemeForServer: (theme: string) => "light" | "dark" | "system";
+/**
+ * Checks if the browser supports View Transitions API
+ * @returns true if view transitions are supported
+ */
+declare const supportsViewTransitions: () => boolean;
+/**
+ * Checks if user prefers reduced motion
+ * @returns true if user prefers reduced motion
+ */
+declare const prefersReducedMotion: () => boolean;
+/**
+ * Converts a slide direction to from coordinates
+ * @param direction - Slide direction
+ * @returns Object with a (x) and b (y) coordinates
+ */
+interface SlideCoordinates {
+    readonly a: number;
+    readonly b: number;
+}
+declare const getSlideFromCoords: (direction: SlideDirection) => SlideCoordinates;
+/** Viewport CSS coordinates for fixed origins; button origins stay in the hook. */
+declare const getAnimationPosition: (position: Exclude<AnimationPosition, "trigger">) => NonNullable<ThemeTransitionOptions["origin"]>;
+/** A half-plane wipe, including diagonals, with compatible four-point polygons. */
+declare const createClipPathAnimation: (config: AnimationConfig) => Animation;
+/** Feathered polygon/edge mask, without Gaussian filtering or scaling content. */
+declare const createPolygonGradientAnimation: (config: AnimationConfig) => Animation;
+/** Upright triangle; its final incircle contains all four snapshot corners. */
+declare const createTriangleAnimation: (config: AnimationConfig) => Animation;
+/** The fixed logo has its own snapshot; only the page reveal grows beneath it. */
+declare const createSvgLogoAnimation: (config: AnimationConfig) => Animation;
+/** Native circular clip; browser compositor support varies by engine. */
+declare const createCircleAnimation: (config: AnimationConfig) => Animation;
+/** Predetermined translation uses WAAPI rather than a timer-owned stylesheet. */
+declare const createSlideAnimation: (config: AnimationConfig) => Animation;
+/**
+ * A bounded radial gradient feathers only the reveal edge. Unlike the old SVG
+ * Gaussian mask, it needs no huge filtered surface or animation on the old view.
+ * Mask animation can still paint; this is not a compositor-only guarantee.
+ */
+declare const createBlurCircleAnimation: (config: AnimationConfig) => Animation;
+
+export { type AnimationPosition as A, getAnimationPosition as B, type ColorTheme as C, getSlideFromCoords as D, type SlideDirection as S, TRANSITION_DIRECTIONS as T, type UseThemeAnimationProps as U, type ColorThemeToggle as a, type SystemThemeMode as b, type Theme as c, type ThemeAnimationOptions as d, ThemeAnimationType as e, type ThemeLogoOptions as f, type ThemeSelectorProps as g, type ThemeSwitcherProps as h, type ThemeTransitionInput as i, type ThemeTransitionOptions as j, type TransitionDirection as k, type UseThemeAnimationReturn as l, getSystemTheme as m, injectBaseStyles as n, resolveThemeForServer as o, prefersReducedMotion as p, type AnimationConfig as q, resolveTheme as r, supportsViewTransitions as s, createBlurCircleAnimation as t, createCircleAnimation as u, createClipPathAnimation as v, createPolygonGradientAnimation as w, createSlideAnimation as x, createSvgLogoAnimation as y, createTriangleAnimation as z };

package/dist/chunk-FNL7ZHF4.js

@@ -0,0 +1,44 @@
+import {a as a$1,b as b$1,e}from'./chunk-X6UEG7WG.js';import {a,b,c,d}from'./chunk-QYUMCBTQ.js';import {a as a$2,b as b$2,c as c$1,g,h}from'./chunk-I3T2QXRT.js';import*as Je from'react';import Je__default,{createContext,useSyncExternalStore,useEffect,useState,useRef,useCallback,useMemo,useContext,useId}from'react';import {flushSync}from'react-dom';import {jsxs,jsx}from'react/jsx-runtime';import {clsx}from'clsx';import {motion}from'motion/react';import*as ie from'@radix-ui/react-select';function Zt(){return ()=>{}}function jt(){return  true}function eo(){return  false}function q(){return useSyncExternalStore(Zt,jt,eo)}function De(e){try{return "window"in globalThis?window.localStorage.getItem(e):null}catch{return null}}function re(e,o){try{"window"in globalThis&&window.localStorage.setItem(e,o);}catch{return}}function he(e){return e===void 0||e===true||e===false?e:"currentTarget"in e?{element:e.currentTarget,animationOff:e.detail===0}:e}var ne="window"in globalThis,ro=["light","dark","system"],no=["default"],O=(e$1={})=>{let{duration:o=400,easing:r="cubic-bezier(0.32, 0.72, 0, 1)",animationType:n="circle",blurAmount:i=2,styleId:l="spaceman-theme-style",clipPathDirection:T="top-left",animationPosition:a,logo:s,logoLight:m,logoDark:h$1,logoWidth:f,logoHeight:P,gradientWidth:A,themes:p=ro,colorThemes:g$1=no,defaultTheme:J="system",defaultColorTheme:x="default",globalClassName:D="dark",colorThemePrefix:E="theme-",attribute:V="class",value:H,enableColorScheme:c=true,storageKey:y="theme",colorStorageKey:v="color-theme",theme:k,colorTheme:b,onThemeChange:u,onColorThemeChange:R,initialTheme:N,initialColorTheme:$,systemThemeMode:X="js",slideDirection:U="left",slideFromX:C,slideFromY:L,slideToX:z=0,slideToY:d=0}=e$1;a$1({logo:s,logoLight:m,logoDark:h$1});let I=o;useEffect(()=>{if(n==="svg-logo")for(let t of [s,m,h$1])t!==void 0&&t!==""&&b$1(t);},[n,s,m,h$1]);let ae=q();useEffect(()=>{a$2();},[]);let[Kt,Ut]=useState(()=>{if(N!==void 0)return N;if(!ne)return J;let t=De(y);return t!==null&&(t==="light"||t==="dark"||t==="system")&&p.includes(t)?t:J}),[Gt,Yt]=useState(()=>{if($!==void 0)return $;if(!ne)return x;let t=De(v);return t!==null&&t!==""&&g$1.includes(t)?t:x}),_=k??(ae?Kt:N??J),F=b??(ae?Gt:$??x),[,qt]=useState(()=>b$2()),Oe=ae?b$2():"light",j=_==="system"?Oe:c$1(_);useEffect(()=>{if(!ne)return;let t=window.matchMedia("(prefers-color-scheme: dark)"),S=()=>{qt(b$2());};return t.addEventListener("change",S),()=>{t.removeEventListener("change",S);}},[]),useEffect(()=>{if(!ne||!ae)return;let t=document.documentElement,S=H?.light,W=H?.dark??D,Q=H?.system??"system";V==="data-theme"?X==="css"&&_==="system"?t.setAttribute("data-theme",Q):t.setAttribute("data-theme",j==="dark"?W:S??"light"):(S!==void 0&&S!==""&&t.classList.remove(S),t.classList.remove(W,Q,"auto"),X==="css"&&_==="system"?t.classList.add(Q):j==="dark"?t.classList.add(W):S!==void 0&&S!==""?t.classList.add(S):t.classList.remove(W)),c?t.style.colorScheme=X==="css"&&_==="system"?"":j:t.style.removeProperty("color-scheme"),g$1.forEach(te=>{t.classList.remove(`${E}${te}`);}),t.classList.add(`${E}${F}`);},[j,_,F,D,E,g$1,V,H,c,ae,X]);let Be=useRef(null),G=useRef(_),le=useRef(F),Te=useRef(0);useEffect(()=>{Te.current===0&&(G.current=_,le.current=F);},[_,F]);let ue=useCallback(t=>{ne&&re(y,t),k===void 0&&Ut(t),u&&u(t);},[u,k,y]),pe=useCallback(t=>{ne&&re(v,t),b===void 0&&Yt(t),R&&R(t);},[R,b,v]),qe=useCallback(t=>{G.current=t,ue(t);},[ue]),Qe=useCallback(t=>{le.current=t,pe(t);},[pe]),ge=useCallback(async(t,S=false)=>{let W=S===true||S===false?{animationOff:S}:S,Q=null;if(W.animationOff!==true&&I>0)if(n==="slide")Q={...C!==void 0&&L!==void 0?{a:C,b:L}:g(U),x:z,y:d,duration:I,easing:r,animationType:n,blurAmount:i,styleId:l};else {let te=W.element??Be.current,se=W.origin?null:te?.getBoundingClientRect(),ye=(n==="svg-logo"?h("center"):null)??W.origin??(a&&a!=="trigger"?h(a):null)??(se?{x:se.left+se.width/2,y:se.top+se.height/2}:n==="circle"||n==="blur-circle"?null:h("center"));ye&&Number.isFinite(ye.x)&&Number.isFinite(ye.y)&&(Q={...ye,duration:I,easing:r,animationType:n,blurAmount:i,styleId:l,clipPathDirection:T,animationPosition:a,logo:m!==void 0?c$1(G.current)==="light"?m:h$1:s,logoWidth:f,logoHeight:P,gradientWidth:A});}Te.current++;try{await e(()=>{flushSync(t);},Q),Te.current--;}catch(te){throw Te.current--,te}},[I,r,n,i,l,U,C,L,z,d,T,a,s,m,h$1,f,P,A]),Y=useCallback(async(t,S)=>{t!==G.current&&(G.current=t,await ge(()=>{ue(t);},S));},[ge,ue]),ee=useCallback(async(t,S)=>{if(!g$1.includes(t)){console.warn(`Color theme "${t}" not found in available themes`);return}t!==le.current&&(le.current=t,await ge(()=>{pe(t);},S));},[g$1,ge,pe]),Ze=useCallback(async t=>{await Y(c$1(G.current)==="dark"?"light":"dark",t);},[Y]),je=useCallback(async t=>{c$1(G.current)!=="light"&&await Y("light",t);},[Y]),et=useCallback(async t=>{c$1(G.current)!=="dark"&&await Y("dark",t);},[Y]),tt=useCallback(async t=>{if(g$1.length===0)return;let S=g$1.indexOf(le.current);await ee(g$1[(S+1)%g$1.length],he(t));},[g$1,ee]),ot=useCallback(t=>async S=>ee(t,he(S)),[ee]),rt=useCallback(t=>F===t,[F]);return useMemo(()=>({ref:Be,theme:_,colorTheme:F,resolvedTheme:j,systemTheme:Oe,setTheme:qe,setColorTheme:Qe,switchTheme:Y,switchColorTheme:ee,toggleTheme:Ze,toggleLightTheme:je,toggleDarkTheme:et,toggleColorTheme:tt,createColorThemeToggle:ot,isColorThemeActive:rt}),[Be,_,F,j,Oe,qe,Qe,Y,ee,Ze,je,et,tt,ot,rt])};var K=createContext(null),ke=()=>useContext(K);function st(){return 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"})]})}function ct(){return 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"})})}function Tt(){return jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("circle",{cx:"12",cy:"12",r:"5"}),jsx("path",{d:"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"})]})}var Re=["light","dark","system"],ut=[{icon:Je__default.createElement(st),value:"system"},{icon:Je__default.createElement(Tt),value:"light"},{icon:Je__default.createElement(ct),value:"dark"}];function pt({icon:e,value:o,isActive:r,isHovered:n,onClick:i,onMouseEnter:l,onMouseLeave:T,buttonRef:a}){return jsxs("button",{type:"button",ref:r===true?a:void 0,className:clsx("relative flex h-9 w-12 cursor-pointer items-center justify-center","text-muted-foreground hover:text-foreground",r===true&&"text-foreground font-medium"),"aria-pressed":r===true,"aria-label":`Switch to ${o} theme`,onClick:s=>{i(o,s);},onMouseEnter:l,onMouseLeave:T,style:{borderRadius:"var(--radius)"},children:[n===true&&jsx(motion.div,{layoutId:"theme-hover",className:"bg-muted absolute inset-0",style:{borderRadius:"var(--radius)"},transition:{type:"spring",bounce:0,stiffness:100,damping:10,duration:.3}}),jsx("div",{className:"relative z-10 flex items-center justify-center",children:jsx("div",{className:"[&_svg]:size-4",children:e})}),r===true&&jsx("div",{className:"absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full",style:{backgroundColor:"hsl(var(--primary))"}})]})}function Ee({className:e,onSwitchTheme:o,theme:r,themes:n,themeRef:i}){let l=q(),[T,a]=useState(null),s=async(h,f)=>{await o(h,f);},m=ut.filter(h=>n.includes(h.value));return jsx("fieldset",{className:clsx("bg-background border-border m-0 inline-flex h-9 min-w-0 items-center overflow-hidden border p-0 shadow-sm",l?"opacity-100":"opacity-0",e),style:{borderRadius:"var(--radius)",backgroundColor:"hsl(var(--background))"},"aria-label":"Theme",children:m.map(h=>jsx(pt,{icon:h.icon,value:h.value,isActive:r===h.value,isHovered:T===h.value,onClick:(f,P)=>{s(f,P).catch(console.error);},onMouseEnter:()=>{a(h.value);},onMouseLeave:()=>{a(null);},buttonRef:r===h.value?i:void 0},h.value))})}function yt({themes:e=Re,currentTheme:o,onThemeChange:r,animationType:n,duration:i,className:l,...T}){let a=O({...T,animationType:n,duration:i,themes:e,...o!==void 0&&{theme:o},onThemeChange:r});return jsx(Ee,{className:l,onSwitchTheme:async(m,h)=>{await a.switchTheme(m,{element:h?.currentTarget,animationOff:h?.detail===0});},theme:a.theme,themes:e,themeRef:a.ref})}function ft({className:e,contextTheme:o,themes:r=Re}){return jsx(Ee,{className:e,onSwitchTheme:async(i,l)=>{if(l?.detail===0){await o.switchTheme(i,true);return}if(o.switchThemeFromElement&&l){await o.switchThemeFromElement(i,l.currentTarget);return}await o.switchTheme(i);},theme:o.theme,themes:r,themeRef:o.ref})}function on(e){let o=ke();return o?jsx(ft,{...e,contextTheme:o}):jsx(yt,{...e})}var Le=["default"],Ct=["light","dark","system"];function $e({...e}){return jsx(ie.Root,{"data-slot":"select",...e})}function Fe({className:e,children:o,position:r="popper",...n}){return jsx(ie.Portal,{children:jsx(ie.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",r==="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",e),position:r,...n,children:jsx(ie.Viewport,{className:clsx("p-1",r==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:o})})})}function xt(){return 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 We({className:e,children:o,...r}){return jsxs(ie.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",e),...r,children:[jsx("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:jsx(ie.ItemIndicator,{children:jsx(xt,{})})}),jsx(ie.ItemText,{children:o})]})}function Rt(){return 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"})})}var Ae=Je.forwardRef(function({className:e,size:o="default",children:r,...n},i){return jsxs(ie.Trigger,{ref:i,"data-slot":"select-trigger","data-size":o,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",e),...n,children:[r,jsx(ie.Icon,{asChild:true,children:jsx(Rt,{})})]})});Ae.displayName="SelectTrigger";function Ke({...e}){return jsx(ie.Value,{"data-slot":"select-value",...e})}function Ve({className:e,placeholder:o="Choose a color theme",colorThemeLabel:r,colorTheme:n,colorThemes:i,onSelectColorTheme:l}){let T=useId(),a=useRef(null),s=useRef("keyboard");return i.length>1?jsxs("div",{className:["flex flex-col gap-2",e].filter(Boolean).join(" "),children:[r!==void 0&&r!==""?jsx("label",{htmlFor:T,children:r}):null,jsxs($e,{value:n,onValueChange:m=>{l(m,{element:a.current,animationOff:s.current==="keyboard"}).catch(console.error);},children:[jsx(Ae,{id:T,ref:a,onPointerDownCapture:()=>{s.current="pointer";},onKeyDownCapture:()=>{s.current="keyboard";},className:"capitalize",children:jsx(Ke,{placeholder:o})}),jsx(Fe,{onPointerDownCapture:()=>{s.current="pointer";},onKeyDownCapture:()=>{s.current="keyboard";},children:i.map(m=>jsx(We,{className:"capitalize",value:m,children:m},m))})]})]}):null}function At({className:e,placeholder:o,colorThemeLabel:r,themes:n=Ct,colorThemes:i=Le,currentColorTheme:l,onColorThemeChange:T,animationType:a,duration:s,...m}){let h=O({...m,animationType:a,duration:s,themes:n,colorThemes:i,...l!==void 0&&{colorTheme:l},onColorThemeChange:T}),f=h.switchColorTheme;return jsx(Ve,{className:e,placeholder:o,colorThemeLabel:r,colorTheme:h.colorTheme,colorThemes:i,onSelectColorTheme:f})}function Vt({className:e,placeholder:o,colorThemeLabel:r,onColorThemeChange:n,colorThemes:i=Le,contextTheme:l}){let T=async(a,s)=>{a!==l.colorTheme&&(await l.switchColorTheme(a,s),n?.(a));};return jsx(Ve,{className:e,placeholder:o,colorThemeLabel:r,colorTheme:l.colorTheme,colorThemes:i,onSelectColorTheme:T})}function Yn(e){let o=ke();return o?jsx(Vt,{...e,contextTheme:o}):jsx(At,{...e})}var Io=["light","dark","system"],Mo=["default"],Ot=createContext(void 0);function ri({children:e,themes:o=Io,colorThemes:r=Mo,defaultTheme:n="system",defaultColorTheme:i="default",animationType:l="circle",duration:T=400,...a}){let s=q(),m=O({...a,themes:o,colorThemes:r,defaultTheme:n,defaultColorTheme:i,animationType:l,duration:T}),h=useCallback(async(P,A)=>{await m.switchTheme(P,{element:A});},[m]),f=useMemo(()=>s?{ref:m.ref,theme:m.theme,colorTheme:m.colorTheme,resolvedTheme:m.resolvedTheme,setTheme:m.setTheme,setColorTheme:m.setColorTheme,switchTheme:m.switchTheme,switchThemeFromElement:h,switchColorTheme:m.switchColorTheme,toggleTheme:m.toggleTheme,toggleLightTheme:m.toggleLightTheme,toggleDarkTheme:m.toggleDarkTheme,toggleColorTheme:m.toggleColorTheme,createColorThemeToggle:m.createColorThemeToggle,isColorThemeActive:m.isColorThemeActive}:{ref:{current:null},theme:n,colorTheme:i,resolvedTheme:n==="dark"?"dark":"light",setTheme:()=>{},setColorTheme:()=>{},switchTheme:async()=>Promise.resolve(),switchThemeFromElement:async()=>Promise.resolve(),switchColorTheme:async()=>Promise.resolve(),toggleTheme:async()=>Promise.resolve(),toggleLightTheme:async()=>Promise.resolve(),toggleDarkTheme:async()=>Promise.resolve(),toggleColorTheme:async()=>Promise.resolve(),createColorThemeToggle:()=>async()=>Promise.resolve(),isColorThemeActive:()=>false},[s,n,i,m,h]);return jsx(Ot.Provider,{value:f,children:jsx(K.Provider,{value:f,children:e})})}var ni=()=>{let e=useContext(Ot);if(e===void 0)throw new Error("useSpacemanTheme must be used within a SpacemanThemeProvider");return e};function w(e){return JSON.stringify(e).replaceAll("<","\\u003c").replaceAll(">","\\u003e").replaceAll("&","\\u0026").replaceAll("\u2028","\\u2028").replaceAll("\u2029","\\u2029")}var Vo=({attribute:e,colorStorageKey:o,colorThemePrefix:r,defaultColorTheme:n,defaultTheme:i,enableColorScheme:l,enableSystem:T,globalClassName:a,storageKey:s,value:m})=>{let h=m?.light??"light",f=m?.dark??a,P=m?.system??"system";return `(function(){try{var d=document.documentElement;var theme=localStorage.getItem(${w(s)})||${w(i)};var colorTheme=localStorage.getItem(${w(o)})||${w(n)};if(!${JSON.stringify(T)}&&theme==='system'){theme=${w(i==="system"?"light":i)};}var resolved=theme==='system'?(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):theme;var attr=${w(e)};var lightValue=${w(h)};var darkValue=${w(f)};var systemValue=${w(P)};if(attr==='data-theme'){d.setAttribute('data-theme',theme==='system'?systemValue:(resolved==='dark'?darkValue:lightValue));}else{d.classList.remove(lightValue,darkValue,systemValue,'auto');d.classList.add(theme==='system'?systemValue:(resolved==='dark'?darkValue:lightValue));}if(${JSON.stringify(l)}){d.style.colorScheme=theme==='system'?'':resolved;}else{d.style.removeProperty('color-scheme');}d.classList.add(${w(r)}+colorTheme);}catch(e){console.warn('Theme pre-hydration script failed:',e);}})();`},Ue=Je__default.memo(function({attribute:e,colorStorageKey:o,colorThemePrefix:r,defaultColorTheme:n,defaultTheme:i,enableColorScheme:l,enableSystem:T,globalClassName:a,nonce:s,scriptProps:m,storageKey:h,value:f}){return jsx("script",{...m,nonce:s,suppressHydrationWarning:true,dangerouslySetInnerHTML:{__html:Vo({attribute:e,colorStorageKey:o,colorThemePrefix:r,defaultColorTheme:n,defaultTheme:i,enableColorScheme:l,enableSystem:T,globalClassName:a,storageKey:h,value:f})}})});Ue.displayName="ThemePreHydrationScript";var Bo=["default"],Dt=createContext(void 0),Do=()=>{let e=document.createElement("style");return e.textContent="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}",document.head.appendChild(e),window.getComputedStyle(document.body),()=>{setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e);},1);}};function Xo({attribute:e="class",children:o,colorStorageKey:r="color-theme",colorThemePrefix:n="theme-",colorThemes:i=Bo,defaultColorTheme:l="default",defaultTheme:T="system",disableAnimationOnInit:a=true,disablePreHydrationScript:s=false,disableTransitionOnChange:m=false,duration:h=400,enableColorScheme:f=true,enableSystem:P=true,forcedTheme:A,globalClassName:p="dark",nonce:g,onColorThemeChange:J,onThemeChange:x,scriptProps:D,storageKey:E="theme",themes:V,value:H,animationType:c="circle",...y}){let v=useMemo(()=>V&&V.length>0?V:P?["light","dark","system"]:["light","dark"],[P,V]),k=useMemo(()=>T==="system"&&!P?"light":T,[T,P]),b=q(),u=O({...y,animationType:c,attribute:e,colorStorageKey:r,colorTheme:void 0,colorThemePrefix:n,colorThemes:i,defaultColorTheme:l,defaultTheme:k,duration:h,enableColorScheme:f,globalClassName:p,onColorThemeChange:J,onThemeChange:x,storageKey:E,theme:A,themes:v,value:H}),R=useCallback(async C=>{let L=m?Do():void 0;try{let z=await C();return L?.(),z}catch(z){throw L?.(),z}},[m]),N=useCallback(C=>{R(()=>{u.setTheme(C);});},[u,R]),$=useCallback(async(C,L=false)=>{await R(async()=>{if(!b&&a){u.setTheme(C);return}await u.switchTheme(C,L);});},[a,b,u,R]),X=useCallback(async(C,L)=>{await R(async()=>{if(!b&&a){u.setTheme(C);return}await u.switchTheme(C,{element:L});});},[a,b,u,R]),U=useMemo(()=>({ref:u.ref,theme:u.theme,colorTheme:u.colorTheme,resolvedTheme:u.resolvedTheme,systemTheme:u.systemTheme,setTheme:N,setColorTheme:u.setColorTheme,switchTheme:$,switchColorTheme:u.switchColorTheme,toggleTheme:async(C=false)=>R(async()=>u.toggleTheme(C)),toggleLightTheme:async(C=false)=>R(async()=>u.toggleLightTheme(C)),toggleDarkTheme:async(C=false)=>R(async()=>u.toggleDarkTheme(C)),toggleColorTheme:u.toggleColorTheme,createColorThemeToggle:u.createColorThemeToggle,isColorThemeActive:u.isColorThemeActive,switchThemeFromElement:X}),[N,$,X,u,R]);return jsx(Dt.Provider,{value:U,children:jsxs(K.Provider,{value:U,children:[!s&&!A?jsx(Ue,{attribute:e,colorStorageKey:r,colorThemePrefix:n,defaultColorTheme:l,defaultTheme:k,enableColorScheme:f,enableSystem:P,globalClassName:p,nonce:g,scriptProps:D,storageKey:E,value:H}):null,o]})})}var fi=Xo,_o=()=>{let e=useContext(Dt);if(e===void 0)throw new Error("useNextTheme must be used within a NextThemeProvider");return e},vi=_o;var zo=(e,o,r,n,i,l,T)=>`
+(function() {
+  try {
+    var theme = localStorage.getItem(${w(e)}) || ${w(r)};
+    var colorTheme = localStorage.getItem(${w(o)}) || ${w(n)};
+    var el = document.documentElement;
+    var resolved;
+    if (theme === 'system') {
+      if (${w(T)} === 'css') {
+        el.classList.remove(${w(i)});
+        el.classList.remove('auto');
+        el.classList.remove('system');
+        el.classList.add('system');
+        el.style.colorScheme = '';
+      } else {
+        resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        if (resolved === 'dark') {
+          el.classList.add(${w(i)});
+        } else {
+          el.classList.remove(${w(i)});
+        }
+        el.classList.remove('system');
+        el.classList.remove('auto');
+        el.style.colorScheme = resolved;
+      }
+    } else {
+      resolved = theme;
+      el.classList.remove('system');
+      el.classList.remove('auto');
+      if (resolved === 'dark') {
+        el.classList.add(${w(i)});
+      } else {
+        el.classList.remove(${w(i)});
+      }
+      el.style.colorScheme = resolved;
+    }
+    if (colorTheme && colorTheme !== 'default') {
+      el.classList.add(${w(l)} + colorTheme);
+    }
+  } catch (e) {
+    console.warn('Theme pre-hydration script failed:', e);
+  }
+})();
+`,Xt=Je__default.memo(function({storageKey:e=a,colorStorageKey:o=b,defaultTheme:r="system",defaultColorTheme:n="default",globalClassName:i=c,colorThemePrefix:l=d,nonce:T,systemThemeMode:a$1="js"}){let s=zo(e,o,r,n,i,l,a$1);return jsx("script",{nonce:T,suppressHydrationWarning:true,dangerouslySetInnerHTML:{__html:s}})});Xt.displayName="TanStackStartThemeScript";var Ko="window"in globalThis,_t=({enabled:e,theme:o,colorTheme:r,storageKey:n,colorStorageKey:i})=>{useEffect(()=>{!e||!Ko||(o&&re(n,o),r!==void 0&&r!==""&&re(i,r));},[e,o,r,n,i]);};var Ne=()=>"window"in globalThis&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",Jt=e=>e==="dark"?"light":"dark";function Ye(e,o){let r=e?.(o);r instanceof Promise&&r.catch(console.error);}var Qo=["light","dark","system"],Zo=["default"],zt=createContext(void 0),jo=()=>useSyncExternalStore(()=>()=>{},()=>true,()=>false);function Ji({children:e,themes:o=Qo,colorThemes:r=Zo,defaultTheme:n="system",defaultColorTheme:i="default",animationType:l="circle",duration:T=400,storageKey:a$1=a,colorStorageKey:s=b,globalClassName:m=c,colorThemePrefix:h=d,serverTheme:f,serverColorTheme:P,systemThemeMode:A="css",onServerThemeChange:p,onServerColorThemeChange:g,...J}){let x=jo(),D=f!==void 0,E=D?f:void 0,V=useCallback(d=>{Ye(p,d);},[p]),H=useCallback(d=>{Ye(g,d);},[g]),c=O({...J,onThemeChange:V,onColorThemeChange:H,themes:o,colorThemes:r,defaultTheme:n,defaultColorTheme:i,animationType:l,duration:T,storageKey:a$1,colorStorageKey:s,globalClassName:m,colorThemePrefix:h,initialTheme:E,initialColorTheme:P,systemThemeMode:A});_t({enabled:D,theme:E,colorTheme:P,storageKey:a$1,colorStorageKey:s});let y=useCallback(d=>{c.setTheme(d);},[c]),v=useCallback(d=>{c.setColorTheme(d);},[c]),k=useCallback(async(d,I=false)=>{if(!x){y(d);return}await c.switchTheme(d,I);},[x,c,y]),b=useCallback(async(d=false)=>{let I=Jt(c.resolvedTheme);if(!x){y(I);return}await c.toggleTheme(d);},[x,c,y]),u=useCallback(async(d=false)=>{if(!x){y("light");return}await c.toggleLightTheme(d);},[x,c,y]),R=useCallback(async(d=false)=>{if(!x){y("dark");return}await c.toggleDarkTheme(d);},[x,c,y]),N=useCallback(async(d,I)=>{r.includes(d)&&await c.switchColorTheme(d,I);},[r,c]),$=useCallback(async d=>{await c.toggleColorTheme(d);},[c]),X=useCallback(d=>async I=>N(d,he(I)),[N]),U=useCallback(async(d,I)=>{if(!x){y(d);return}await c.switchTheme(d,{element:I});},[x,c,y]),C=Ne(),L=D?f==="dark"?"dark":f==="system"?C:"light":n==="dark"?"dark":"light",z=useMemo(()=>x?{ref:c.ref,theme:c.theme,colorTheme:c.colorTheme,resolvedTheme:c.resolvedTheme,systemTheme:C,isHydrated:true,setTheme:y,setColorTheme:v,switchTheme:k,switchThemeFromElement:U,switchColorTheme:N,toggleTheme:b,toggleLightTheme:u,toggleDarkTheme:R,toggleColorTheme:$,createColorThemeToggle:X,isColorThemeActive:c.isColorThemeActive}:{ref:{current:null},theme:E??n,colorTheme:P??i,resolvedTheme:L,systemTheme:"light",isHydrated:false,setTheme:y,setColorTheme:v,switchTheme:async d=>(y(d),Promise.resolve()),switchThemeFromElement:async d=>(y(d),Promise.resolve()),switchColorTheme:N,toggleTheme:async()=>(y(L==="dark"?"light":"dark"),Promise.resolve()),toggleLightTheme:async()=>(y("light"),Promise.resolve()),toggleDarkTheme:async()=>(y("dark"),Promise.resolve()),toggleColorTheme:$,createColorThemeToggle:X,isColorThemeActive:c.isColorThemeActive},[x,E,n,P,i,L,y,v,N,$,X,c,C,k,U,b,u,R]);return jsx(zt.Provider,{value:z,children:jsx(K.Provider,{value:z,children:e})})}var $i=()=>{let e=useContext(zt);if(e===void 0)throw new Error("useTanStackTheme must be used within a TanStackThemeProvider");return e};var rr=["light","dark","system"],nr=["default"],Wt=createContext(void 0);function Qi({children:e,themes:o=rr,colorThemes:r=nr,defaultTheme:n="system",defaultColorTheme:i="default",animationType:l="circle",duration:T=400,attribute:a="class",disableTransitionOnChange:s=false,storageKey:m="vite-theme",colorStorageKey:h="vite-color-theme",globalClassName:f="dark",colorThemePrefix:P="theme-",...A}){let p=O({...A,themes:o,colorThemes:r,defaultTheme:n,defaultColorTheme:i,animationType:l,duration:T,storageKey:m,colorStorageKey:h,globalClassName:a==="class"?f:void 0,colorThemePrefix:P}),g=useCallback(()=>{if(!s)return ()=>{};let v=document.createElement("style");return v.textContent="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}",document.head.appendChild(v),window.getComputedStyle(document.body),()=>{setTimeout(()=>{document.head.removeChild(v);},1);}},[s]),J=useCallback(v=>{let k=g();p.setTheme(v),k();},[p,g]),x=useCallback(async(v,k=false)=>{let b=g();await p.switchTheme(v,k),b();},[p,g]),D=useCallback(async(v=false)=>{let k=g();await p.toggleTheme(v),k();},[p,g]),E=useCallback(async(v=false)=>{let k=g();await p.toggleLightTheme(v),k();},[p,g]),V=useCallback(async(v=false)=>{let k=g();await p.toggleDarkTheme(v),k();},[p,g]),H=useCallback(async(v,k)=>{let b=g();try{await p.switchTheme(v,{element:k}),b();}catch(u){throw b(),u}},[p,g]),c=Ne(),y=useMemo(()=>({ref:p.ref,theme:p.theme,colorTheme:p.colorTheme,resolvedTheme:p.resolvedTheme,systemTheme:c,setTheme:J,setColorTheme:p.setColorTheme,switchTheme:x,switchThemeFromElement:H,switchColorTheme:p.switchColorTheme,toggleTheme:D,toggleLightTheme:E,toggleDarkTheme:V,toggleColorTheme:p.toggleColorTheme,createColorThemeToggle:p.createColorThemeToggle,isColorThemeActive:p.isColorThemeActive}),[p,c,J,x,H,D,E,V]);return jsx(Wt.Provider,{value:y,children:jsx(K.Provider,{value:y,children:e})})}var Zi=()=>{let e=useContext(Wt);if(e===void 0)throw new Error("useViteTheme must be used within a ViteThemeProvider");return e};export{q as a,O as b,on as c,Yn as d,ri as e,ni as f,Xo as g,fi as h,_o as i,vi as j,Xt as k,Ji as l,$i as m,Qi as n,Zi as o};