@pyreon/rocketstyle 0.11.4 → 0.11.6

package/src/rocketstyle.ts

@@ -1,21 +1,21 @@
-import { compose, config, hoistNonReactStatics, omit, pick, render } from "@pyreon/ui-core"
-import { LocalThemeManager } from "./cache"
-import { CONFIG_KEYS, PSEUDO_KEYS, PSEUDO_META_KEYS, STYLING_KEYS } from "./constants"
-import createLocalProvider from "./context/createLocalProvider"
-import { useLocalContext } from "./context/localContext"
-import { rocketstyleAttrsHoc } from "./hoc"
-import { useTheme } from "./hooks"
-import type { Configuration, ExtendedConfiguration } from "./types/configuration"
-import type { RocketComponent } from "./types/rocketComponent"
-import type { InnerComponentProps, RocketStyleComponent } from "./types/rocketstyle"
-import type { ComponentFn } from "./types/utils"
-import { calculateChainOptions, calculateStylingAttrs, pickStyledAttrs } from "./utils/attrs"
-import { chainOptions, chainOrOptions, chainReservedKeyOptions } from "./utils/chaining"
-import { calculateHocsFuncs } from "./utils/compose"
-import { getDimensionsMap } from "./utils/dimensions"
-import { createStaticsChainingEnhancers, createStaticsEnhancers } from "./utils/statics"
-import { calculateStyles } from "./utils/styles"
-import { getDimensionThemes, getTheme, getThemeByMode, getThemeFromChain } from "./utils/theme"
+import { compose, config, hoistNonReactStatics, omit, pick, render } from '@pyreon/ui-core'
+import { LocalThemeManager } from './cache'
+import { CONFIG_KEYS, PSEUDO_KEYS, PSEUDO_META_KEYS, STYLING_KEYS } from './constants'
+import createLocalProvider from './context/createLocalProvider'
+import { useLocalContext } from './context/localContext'
+import { rocketstyleAttrsHoc } from './hoc'
+import { useTheme } from './hooks'
+import type { Configuration, ExtendedConfiguration } from './types/configuration'
+import type { RocketComponent } from './types/rocketComponent'
+import type { InnerComponentProps, RocketStyleComponent } from './types/rocketstyle'
+import type { ComponentFn } from './types/utils'
+import { calculateChainOptions, calculateStylingAttrs, pickStyledAttrs } from './utils/attrs'
+import { chainOptions, chainOrOptions, chainReservedKeyOptions } from './utils/chaining'
+import { calculateHocsFuncs } from './utils/compose'
+import { getDimensionsMap } from './utils/dimensions'
+import { createStaticsChainingEnhancers, createStaticsEnhancers } from './utils/statics'
+import { calculateStyles } from './utils/styles'
+import { getDimensionThemes, getTheme, getThemeByMode, getThemeFromChain } from './utils/theme'
 
 /**
  * Core rocketstyle component factory. Creates a fully-featured Pyreon component
@@ -123,119 +123,113 @@ const rocketComponent: RocketComponent = (options) => {
     }
 
     // --------------------------------------------------
-    // Reactive accessor — re-evaluates when mode changes.
-    // When mounted, the runtime wraps this in an effect so
-    // reading themeAttrs.mode creates a reactive dependency.
-    // Mode switches are infrequent (user-initiated), so full
-    // re-render of the styled subtree is acceptable.
+    // Static theme structure — computed once at mount, doesn't change with mode.
+    // Only the mode-dependent resolution is reactive (via $rocketstyle accessor).
     // --------------------------------------------------
-    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: theme resolution is inherently multi-step
-    return (() => {
-      // Read theme and mode lazily via getters — tracked by the effect
-      const theme = themeAttrs.theme
-      const mode = themeAttrs.mode
-
-      // --------------------------------------------------
-      // calculate themes for all defined styling dimensions
-      // --------------------------------------------------
-
-      // BASE / DEFAULT THEME Object (cached by theme identity)
-      const baseThemeHelper = ThemeManager.baseTheme
-      if (!baseThemeHelper.has(theme)) {
-        baseThemeHelper.set(theme, getThemeFromChain(options.theme, theme))
-      }
-      const baseTheme = baseThemeHelper.get(theme)
+    const theme = themeAttrs.theme
 
-      // DIMENSION(S) THEMES Object (cached by theme identity)
-      const dimHelper = ThemeManager.dimensionsThemes
-      if (!dimHelper.has(theme)) {
-        dimHelper.set(theme, getDimensionThemes(theme, options))
-      }
-      const themes = dimHelper.get(theme)
+    // BASE / DEFAULT THEME Object (cached by theme identity)
+    const baseThemeHelper = ThemeManager.baseTheme
+    if (!baseThemeHelper.has(theme)) {
+      baseThemeHelper.set(theme, getThemeFromChain(options.theme, theme))
+    }
+    const baseTheme = baseThemeHelper.get(theme)
+
+    // DIMENSION(S) THEMES Object (cached by theme identity)
+    const dimHelper = ThemeManager.dimensionsThemes
+    if (!dimHelper.has(theme)) {
+      dimHelper.set(theme, getDimensionThemes(theme, options))
+    }
+    const themes = dimHelper.get(theme)
+
+    // --------------------------------------------------
+    // dimension map & reserved prop names
+    // --------------------------------------------------
+    const { keysMap: dimensions, keywords: reservedPropNames } = getDimensionsMap({
+      themes,
+      useBooleans: options.useBooleans,
+    })
+
+    const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames)
+
+    // --------------------------------------------------
+    // rocketstate — active dimension values
+    // --------------------------------------------------
+    const rocketstate = _calculateStylingAttrs({
+      props: pickStyledAttrs(mergeProps, reservedPropNames),
+      dimensions,
+    })
+
+    const finalRocketstate = { ...rocketstate, pseudo: pseudoRocketstate }
+
+    // --------------------------------------------------
+    // $rocketstyle as a FUNCTION ACCESSOR — reactive on mode changes.
+    // The styled component calls this inside its own effect() to track
+    // the mode dependency. Only the CSS class swaps — no VNode remount.
+    // --------------------------------------------------
+    const $rocketstyleAccessor = () => {
+      const mode = themeAttrs.mode // reactive read via getter
 
-      // BASE / DEFAULT MODE THEME Object (cached by mode + baseTheme)
       const modeBaseHelper = ThemeManager.modeBaseTheme[mode]
       if (!modeBaseHelper.has(baseTheme)) {
         modeBaseHelper.set(baseTheme, getThemeByMode(baseTheme, mode))
       }
       const currentModeBaseTheme = modeBaseHelper.get(baseTheme)
 
-      // DIMENSION(S) MODE THEMES Object (cached by mode + themes)
       const modeDimHelper = ThemeManager.modeDimensionTheme[mode]
       if (!modeDimHelper.has(themes)) {
         modeDimHelper.set(themes, getThemeByMode(themes, mode))
       }
       const currentModeThemes = modeDimHelper.get(themes)
 
-      // --------------------------------------------------
-      // dimension map & reserved prop names
-      // --------------------------------------------------
-      const { keysMap: dimensions, keywords: reservedPropNames } = getDimensionsMap({
-        themes,
-        useBooleans: options.useBooleans,
-      })
-
-      const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames)
-
-      // --------------------------------------------------
-      // rocketstate — active dimension values
-      // --------------------------------------------------
-      const rocketstate = _calculateStylingAttrs({
-        props: pickStyledAttrs(mergeProps, reservedPropNames),
-        dimensions,
-      })
-
-      const finalRocketstate = { ...rocketstate, pseudo: pseudoRocketstate }
-
-      // --------------------------------------------------
-      // rocketstyle — computed theme based on active dimensions
-      // --------------------------------------------------
-      const computedRocketstyle = getTheme({
+      return getTheme({
         rocketstate,
         themes: currentModeThemes,
         baseTheme: currentModeBaseTheme,
         transformKeys: options.transformKeys,
         appTheme: theme,
       })
+    }
 
-      // --------------------------------------------------
-      // final props passed to WrappedComponent
-      // --------------------------------------------------
-      const finalProps: Record<string, any> = {
-        ...omit(mergeProps, [
-          ...RESERVED_STYLING_PROPS_KEYS,
-          ...PSEUDO_KEYS,
-          ...options.filterAttrs,
-        ]),
-        ...(options.passProps ? pick(mergeProps, options.passProps) : {}),
-        // ref flows as a normal prop in Pyreon
-        ref: props.ref,
-        $rocketstyle: computedRocketstyle,
-        $rocketstate: finalRocketstate,
-      }
+    // --------------------------------------------------
+    // final props passed to WrappedComponent
+    // --------------------------------------------------
+    const finalProps: Record<string, any> = {
+      ...omit(mergeProps, [
+        ...RESERVED_STYLING_PROPS_KEYS,
+        ...PSEUDO_KEYS,
+        ...options.filterAttrs,
+      ]),
+      ...(options.passProps ? pick(mergeProps, options.passProps) : {}),
+      ref: props.ref,
+      // FUNCTION accessor — styled component resolves it reactively
+      $rocketstyle: $rocketstyleAccessor,
+      $rocketstate: finalRocketstate,
+    }
 
-      // development debugging
-      if (process.env.NODE_ENV !== "production") {
-        finalProps["data-rocketstyle"] = componentName
-
-        if (options.DEBUG) {
-          const debugPayload = {
-            component: componentName,
-            rocketstate: finalRocketstate,
-            rocketstyle: computedRocketstyle,
-            dimensions,
-            mode,
-            reservedPropNames: RESERVED_STYLING_PROPS_KEYS,
-            filteredAttrs: options.filterAttrs,
-          }
-
-          // biome-ignore lint/suspicious/noConsole: debug logging controlled by DEBUG option
-          console.debug(`[rocketstyle] ${componentName} render:`, debugPayload)
+    // development debugging
+    if (process.env.NODE_ENV !== 'production') {
+      finalProps['data-rocketstyle'] = componentName
+
+      if (options.DEBUG) {
+        const debugPayload = {
+          component: componentName,
+          rocketstate: finalRocketstate,
+          rocketstyle: $rocketstyleAccessor(),
+          dimensions,
+          mode: themeAttrs.mode,
+          reservedPropNames: RESERVED_STYLING_PROPS_KEYS,
+          filteredAttrs: options.filterAttrs,
         }
+
+        // eslint-disable-next-line no-console
+        console.debug(`[rocketstyle] ${componentName} render:`, debugPayload)
       }
+    }
 
-      return RenderComponent(finalProps)
-    }) as unknown as ReturnType<ComponentFn<InnerComponentProps>>
+    // STATIC VNode — created once, never remounted on mode change.
+    // The styled component handles reactive class swaps internally.
+    return RenderComponent(finalProps)
   }
 
   // ------------------------------------------------------
@@ -285,12 +279,12 @@ const rocketComponent: RocketComponent = (options) => {
       }
 
       if (priority) {
-        result.priorityAttrs = attrs as ExtendedConfiguration["priorityAttrs"]
+        result.priorityAttrs = attrs as ExtendedConfiguration['priorityAttrs']
 
         return cloneAndEnhance(options, result)
       }
 
-      result.attrs = attrs as ExtendedConfiguration["attrs"]
+      result.attrs = attrs as ExtendedConfiguration['attrs']
 
       return cloneAndEnhance(options, result)
     },
@@ -326,8 +320,8 @@ const rocketComponent: RocketComponent = (options) => {
         {
           render,
           mode,
-          isDark: mode === "light",
-          isLight: mode === "dark",
+          isDark: mode === 'light',
+          isLight: mode === 'dark',
         },
       ]),
   })

package/src/types/attrs.ts

@@ -1,5 +1,5 @@
-import type { render } from "@pyreon/ui-core"
-import type { ThemeModeKeys } from "./theme"
+import type { render } from '@pyreon/ui-core'
+import type { ThemeModeKeys } from './theme'
 
 export type AttrsCb<A, T> = (
   props: Partial<A>,

package/src/types/config.ts

@@ -1,6 +1,6 @@
-import type { DimensionBooleanAttrs, Dimensions, ExtractDimensions, TDKP } from "./dimensions"
-import type { PseudoState } from "./pseudo"
-import type { ElementType, TObj } from "./utils"
+import type { DimensionBooleanAttrs, Dimensions, ExtractDimensions, TDKP } from './dimensions'
+import type { PseudoState } from './pseudo'
+import type { ElementType, TObj } from './utils'
 
 // --------------------------------------------------------
 // CONFIG
@@ -11,7 +11,7 @@ export type RocketComponentType = ElementType & {
 }
 
 export type RocketProviderState<T extends RocketComponentType | TObj | unknown = unknown> =
-  T extends RocketComponentType ? Partial<T["$$rocketstyle"]> & { pseudo: PseudoState } : T
+  T extends RocketComponentType ? Partial<T['$$rocketstyle']> & { pseudo: PseudoState } : T
 
 export type ConsumerCtxCBValue<
   T extends RocketComponentType,

package/src/types/configuration.ts

@@ -1,8 +1,8 @@
-import type { ConsumerCb } from "./config"
-import type { Dimensions, MultiKeys } from "./dimensions"
-import type { PseudoProps } from "./pseudo"
-import type { StylesCbArray } from "./styles"
-import type { ArrayOfKeys, ArrayOfValues, ElementType, TFn } from "./utils"
+import type { ConsumerCb } from './config'
+import type { Dimensions, MultiKeys } from './dimensions'
+import type { PseudoProps } from './pseudo'
+import type { StylesCbArray } from './styles'
+import type { ArrayOfKeys, ArrayOfValues, ElementType, TFn } from './utils'
 
 export type __ROCKETSTYLE__ = {
   dimensions: Record<string, string>

package/src/types/dimensions.ts

@@ -1,7 +1,7 @@
-import type { DefaultDimensions } from "../constants/defaultDimensions"
-import type { Css } from "./styles"
-import type { ThemeModeCallback } from "./theme"
-import type { CallBackParam, NullableKeys, ReturnCbParam, Spread, TObj, ValueOf } from "./utils"
+import type { DefaultDimensions } from '../constants/defaultDimensions'
+import type { Css } from './styles'
+import type { ThemeModeCallback } from './theme'
+import type { CallBackParam, NullableKeys, ReturnCbParam, Spread, TObj, ValueOf } from './utils'
 
 export type { DefaultDimensions }
 
@@ -10,7 +10,7 @@ export type ExtractNullableDimensionKeys<T> = {
 }
 
 export type ExtractDimensionKey<T extends DimensionValue> = T extends DimensionValueObj
-  ? T["propName"]
+  ? T['propName']
   : T
 
 export type ExtractDimensionMulti<T extends DimensionValue> = T extends DimensionValueObj

package/src/types/hoc.ts

@@ -1,4 +1,4 @@
-import type { ElementType } from "./utils"
+import type { ElementType } from './utils'
 
 export type GenericHoc = (component: ElementType) => ElementType
 

package/src/types/rocketComponent.ts

@@ -1,7 +1,7 @@
-import type { Configuration } from "./configuration"
-import type { DefaultDimensions, Dimensions } from "./dimensions"
-import type { RocketStyleComponent } from "./rocketstyle"
-import type { ElementType, ExtractProps, TObj } from "./utils"
+import type { Configuration } from './configuration'
+import type { DefaultDimensions, Dimensions } from './dimensions'
+import type { RocketStyleComponent } from './rocketstyle'
+import type { ElementType, ExtractProps, TObj } from './utils'
 
 export type RocketComponent<
   C extends ElementType = ElementType,

package/src/types/rocketstyle.ts

@@ -1,7 +1,7 @@
-import type { VNodeChild } from "@pyreon/core"
-import type { AttrsCb } from "./attrs"
-import type { ConfigAttrs } from "./config"
-import type { DefaultProps } from "./configuration"
+import type { VNodeChild } from '@pyreon/core'
+import type { AttrsCb } from './attrs'
+import type { ConfigAttrs } from './config'
+import type { DefaultProps } from './configuration'
 import type {
   DimensionCallbackParam,
   DimensionProps,
@@ -11,14 +11,14 @@ import type {
   ExtractDimensions,
   MultiKeys,
   TDKP,
-} from "./dimensions"
-import type { ComposeParam } from "./hoc"
-import type { Styles, StylesCb } from "./styles"
-import type { Theme, ThemeCb, ThemeModeKeys } from "./theme"
-import type { ElementType, ExtractProps, MergeTypes, TObj } from "./utils"
+} from './dimensions'
+import type { ComposeParam } from './hoc'
+import type { Styles, StylesCb } from './styles'
+import type { Theme, ThemeCb, ThemeModeKeys } from './theme'
+import type { ElementType, ExtractProps, MergeTypes, TObj } from './utils'
 
 export type InnerComponentProps = {
-  "data-rocketstyle"?: string | undefined
+  'data-rocketstyle'?: string | undefined
 } & Record<string, any>
 
 export type RocketStyleComponent<

package/src/types/styles.ts

@@ -1,6 +1,6 @@
-import type { config } from "@pyreon/ui-core"
-import type { PseudoState } from "./pseudo"
-import type { TObj } from "./utils"
+import type { config } from '@pyreon/ui-core'
+import type { PseudoState } from './pseudo'
+import type { TObj } from './utils'
 
 // biome-ignore lint/suspicious/noEmptyInterface: this is an interface to be extended in consuming projects
 export interface StylesDefault {}
@@ -15,8 +15,13 @@ export type OptionStyles = ((css: Css) => ReturnType<Css>)[]
 /**
  * Props available inside `.styles()` interpolation functions.
  *
- * - `$rocketstyle` — computed theme (inferred from `.theme()` chain)
+ * - `$rocketstyle` — resolved theme object (the styled() runtime resolves
+ *   the reactive accessor before calling interpolation functions)
  * - `$rocketstate` — active dimension values + pseudo state
+ *
+ * Note: internally, rocketstyle passes $rocketstyle as a `() => CSS` accessor
+ * to DynamicStyled for reactive class swapping. But by the time interpolation
+ * functions run, it's always been resolved to a plain CSS object.
  */
 export type RocketStyleInterpolationProps<CSS extends TObj = TObj> = {
   $rocketstyle: CSS

package/src/types/theme.ts

@@ -1,6 +1,6 @@
-import type { THEME_MODES } from "../constants"
-import type { Css } from "./styles"
-import type { MergeTypes } from "./utils"
+import type { THEME_MODES } from '../constants'
+import type { Css } from './styles'
+import type { MergeTypes } from './utils'
 
 // biome-ignore lint/suspicious/noEmptyInterface: this is an interface to be extended in consuming projects
 export interface ThemeDefault {}
@@ -12,7 +12,7 @@ export type ThemeModeKeys = keyof typeof THEME_MODES
 export type ThemeModeCallback = <A = any, B = any>(
   light: A,
   dark: B,
-) => (mode: "light" | "dark") => A | B
+) => (mode: 'light' | 'dark') => A | B
 
 export type ThemeMode = <A = any, B = any>(light: A, dark: B) => A | B
 

package/src/types/utils.ts

@@ -1,4 +1,4 @@
-import type { VNodeChild } from "@pyreon/core"
+import type { VNodeChild } from '@pyreon/core'
 
 export type TObj = Record<string, unknown>
 export type TFn = (...args: any) => any

package/src/utils/attrs.ts

@@ -1,4 +1,4 @@
-import type { MultiKeys } from "../types/dimensions"
+import type { MultiKeys } from '../types/dimensions'
 
 // --------------------------------------------------------
 // remove undefined props
@@ -91,7 +91,7 @@ export const calculateStylingAttrs: CalculateStylingAttrs =
       }
       // assign when it's only a string or number otherwise it's considered
       // as invalid param
-      else if (t === "string" || t === "number") {
+      else if (t === 'string' || t === 'number') {
         result[item] = pickedProp
       } else {
         result[item] = undefined

package/src/utils/chaining.ts

@@ -13,8 +13,8 @@ type ChainOptions = (opts: Obj | Func | undefined, defaultOpts: Func[]) => Func[
 export const chainOptions: ChainOptions = (opts, defaultOpts = []) => {
   const result = [...defaultOpts]
 
-  if (typeof opts === "function") result.push(opts)
-  else if (typeof opts === "object") result.push(() => opts)
+  if (typeof opts === 'function') result.push(opts)
+  else if (typeof opts === 'object') result.push(() => opts)
 
   return result
 }

package/src/utils/compose.ts

@@ -7,5 +7,5 @@ type CalculateHocsFuncs = (options: Record<string, any>) => ((arg: any) => any)[
 
 export const calculateHocsFuncs: CalculateHocsFuncs = (options = {}) =>
   Object.values(options)
-    .filter((item) => typeof item === "function")
+    .filter((item) => typeof item === 'function')
     .reverse()

package/src/utils/dimensions.ts

@@ -1,5 +1,5 @@
-import { get, isEmpty, set } from "@pyreon/ui-core"
-import type { Dimensions, DimensionValue, MultiKeys } from "../types/dimensions"
+import { get, isEmpty, set } from '@pyreon/ui-core'
+import type { Dimensions, DimensionValue, MultiKeys } from '../types/dimensions'
 
 // --------------------------------------------------------
 // Is value a valid key
@@ -15,7 +15,7 @@ export const isValidKey: IsValidKey = (value) =>
 /** Determines if a dimension value is a multi-key config object, returning [isMulti, propName]. */
 type IsMultiKey = (value: string | Record<string, unknown>) => [boolean, string]
 export const isMultiKey: IsMultiKey = (value) => {
-  if (typeof value === "object" && value !== null) return [true, get(value, "propName") as string]
+  if (typeof value === 'object' && value !== null) return [true, get(value, 'propName') as string]
   return [false, value]
 }
 
@@ -81,7 +81,7 @@ type GetDimensionsValues = <T extends Dimensions, K extends keyof T>(obj: T) =>
 
 export const getDimensionsValues = (<T extends Dimensions>(obj: T) =>
   getValues(obj).map((item: DimensionValue) => {
-    if (typeof item === "object") {
+    if (typeof item === 'object') {
       return item.propName as string
     }
 
@@ -97,7 +97,7 @@ type GetMultipleDimensions = <T extends Dimensions>(obj: T) => MultiKeys<T>
 export const getMultipleDimensions: GetMultipleDimensions = (obj) =>
   getValues(obj).reduce(
     (accumulator, value: DimensionValue) => {
-      if (typeof value === "object") {
+      if (typeof value === 'object') {
         if (value.multi === true) accumulator[value.propName] = true
       }
 
@@ -116,7 +116,7 @@ type GetTransformDimensions = <T extends Dimensions>(obj: T) => TransformKeys
 export const getTransformDimensions: GetTransformDimensions = (obj) =>
   getValues(obj).reduce(
     (accumulator, value: DimensionValue) => {
-      if (typeof value === "object") {
+      if (typeof value === 'object') {
         if (value.transform === true) accumulator[value.propName] = true
       }
 

package/src/utils/statics.ts

@@ -1,5 +1,5 @@
-import { isEmpty } from "@pyreon/ui-core"
-import { STATIC_KEYS } from "../constants"
+import { isEmpty } from '@pyreon/ui-core'
+import { STATIC_KEYS } from '../constants'
 
 // --------------------------------------------------------
 // helpers for create statics chaining methods on component

package/src/utils/styles.ts

@@ -1,5 +1,5 @@
-import { config } from "@pyreon/ui-core"
-import type { StylesCbArray } from "../types/styles"
+import { config } from '@pyreon/ui-core'
+import type { StylesCbArray } from '../types/styles'
 
 // --------------------------------------------------------
 // Calculate styles

package/src/utils/theme.ts

@@ -1,17 +1,17 @@
-import { config, isEmpty, merge } from "@pyreon/ui-core"
-import type { ThemeModeCallback } from "../types/theme"
-import { removeNullableValues } from "./collection"
-import { isMultiKey } from "./dimensions"
+import { config, isEmpty, merge } from '@pyreon/ui-core'
+import type { ThemeModeCallback } from '../types/theme'
+import { removeNullableValues } from './collection'
+import { isMultiKey } from './dimensions'
 
 // --------------------------------------------------------
 // Theme Mode Callback
 // --------------------------------------------------------
-const MODE_CALLBACK_BRAND = Symbol.for("pyreon.themeModeCallback")
+const MODE_CALLBACK_BRAND = Symbol.for('pyreon.themeModeCallback')
 
 /** Creates a mode-switching function that returns the light or dark value based on the active mode. */
 export const themeModeCallback: ThemeModeCallback = (light, dark) => {
   const fn = (mode: string) => {
-    if (!mode || mode === "light") return light
+    if (!mode || mode === 'light') return light
     return dark
   }
   ;(fn as unknown as Record<string, unknown>).__brand = MODE_CALLBACK_BRAND
@@ -24,7 +24,7 @@ export const themeModeCallback: ThemeModeCallback = (light, dark) => {
 /** Detects whether a value is a `themeModeCallback` function via Symbol brand. */
 type IsModeCallback = (value: unknown) => boolean
 const isModeCallback: IsModeCallback = (value: unknown) =>
-  typeof value === "function" &&
+  typeof value === 'function' &&
   (value as unknown as Record<string, unknown>).__brand === MODE_CALLBACK_BRAND
 
 // --------------------------------------------------------
@@ -136,7 +136,7 @@ export const getTheme: GetTheme = ({ rocketstate, themes, baseTheme, transformKe
 
     const mergeValue = (item: string) => {
       const val = keyTheme[item]
-      if (isTransform && typeof val === "function") {
+      if (isTransform && typeof val === 'function') {
         deferredTransforms.push(val)
       } else {
         finalTheme = merge({}, finalTheme, val)
@@ -171,7 +171,7 @@ export const getTheme: GetTheme = ({ rocketstate, themes, baseTheme, transformKe
  */
 export type GetThemeByMode = (
   object: Record<string, any>,
-  mode: "light" | "dark",
+  mode: 'light' | 'dark',
 ) => Partial<{
   baseTheme: Record<string, unknown>
   themes: Record<string, unknown>
@@ -182,7 +182,7 @@ export const getThemeByMode: GetThemeByMode = (object, mode) =>
     (acc, key) => {
       const value = object[key]
 
-      if (typeof value === "object" && value !== null) {
+      if (typeof value === 'object' && value !== null) {
         acc[key] = getThemeByMode(value, mode)
       } else if (isModeCallback(value)) {
         acc[key] = value(mode)