@pyreon/rocketstyle 0.11.4 → 0.11.6

package/src/constants/booleanTags.ts

@@ -4,29 +4,29 @@
  * out as unknown styling props.
  */
 export default [
-  "allowFullScreen",
-  "allowPaymentRequest",
-  "async",
-  "autoFocus",
-  "autoPlay",
-  "checked",
-  "controls",
-  "default",
-  "defer",
-  "disabled",
-  "formNoValidate",
-  "hidden",
-  "isMap",
-  "itemScope",
-  "loop",
-  "multiple",
-  "muted",
-  "noModule",
-  "noValidate",
-  "open",
-  "readOnly",
-  "required",
-  "reversed",
-  "selected",
-  "typeMustMatch",
+  'allowFullScreen',
+  'allowPaymentRequest',
+  'async',
+  'autoFocus',
+  'autoPlay',
+  'checked',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'formNoValidate',
+  'hidden',
+  'isMap',
+  'itemScope',
+  'loop',
+  'multiple',
+  'muted',
+  'noModule',
+  'noValidate',
+  'open',
+  'readOnly',
+  'required',
+  'reversed',
+  'selected',
+  'typeMustMatch',
 ]

package/src/constants/defaultDimensions.ts

@@ -4,15 +4,15 @@
  * and `multiple` (a multi-select dimension).
  */
 const DEFAULT_DIMENSIONS = {
-  states: "state",
-  sizes: "size",
-  variants: "variant",
+  states: 'state',
+  sizes: 'size',
+  variants: 'variant',
   multiple: {
-    propName: "multiple",
+    propName: 'multiple',
     multi: true,
   },
   modifiers: {
-    propName: "modifier",
+    propName: 'modifier',
     multi: true,
     transform: true,
   },

package/src/constants/index.ts

@@ -1,11 +1,11 @@
 /** Default theme mode used when no mode is provided via context. */
-export const MODE_DEFAULT = "light"
+export const MODE_DEFAULT = 'light'
 
 /** Pseudo-state interaction keys tracked for styling (hover, active, focus, pressed). */
-export const PSEUDO_KEYS = ["hover", "active", "focus", "pressed"] as const
+export const PSEUDO_KEYS = ['hover', 'active', 'focus', 'pressed'] as const
 
 /** Meta pseudo-state keys representing non-interactive states (disabled, readOnly). */
-export const PSEUDO_META_KEYS = ["disabled", "readOnly"] as const
+export const PSEUDO_META_KEYS = ['disabled', 'readOnly'] as const
 
 /** Supported theme mode flags. */
 export const THEME_MODES = {
@@ -15,30 +15,30 @@ export const THEME_MODES = {
 
 /** Maps each theme mode to its inverse (light -> dark, dark -> light). */
 export const THEME_MODES_INVERSED = {
-  dark: "light",
-  light: "dark",
+  dark: 'light',
+  light: 'dark',
 } as const
 
 /** Reserved configuration keys accepted by the `.config()` chaining method. */
 export const CONFIG_KEYS = [
-  "provider",
-  "consumer",
-  "DEBUG",
-  "name",
-  "component",
-  "inversed",
-  "passProps",
-  "styled",
+  'provider',
+  'consumer',
+  'DEBUG',
+  'name',
+  'component',
+  'inversed',
+  'passProps',
+  'styled',
 ] as const
 
 /** Keys for theme and styles chaining methods. */
-export const STYLING_KEYS = ["theme", "styles"] as const
-export const STATIC_KEYS = [...STYLING_KEYS, "compose"] as const
+export const STYLING_KEYS = ['theme', 'styles'] as const
+export const STATIC_KEYS = [...STYLING_KEYS, 'compose'] as const
 
 /** Union of all reserved keys that cannot be used as dimension names. */
 export const ALL_RESERVED_KEYS = [
   ...Object.keys(THEME_MODES),
   ...CONFIG_KEYS,
   ...STATIC_KEYS,
-  "attrs",
+  'attrs',
 ] as const

package/src/context/context.ts

@@ -1,7 +1,7 @@
-import type { VNodeChild } from "@pyreon/core"
-import { useContext } from "@pyreon/core"
-import { Provider as CoreProvider, context } from "@pyreon/ui-core"
-import { MODE_DEFAULT, THEME_MODES_INVERSED } from "../constants"
+import type { VNodeChild } from '@pyreon/core'
+import { useContext } from '@pyreon/core'
+import { Provider as CoreProvider, context } from '@pyreon/ui-core'
+import { MODE_DEFAULT, THEME_MODES_INVERSED } from '../constants'
 
 type Theme = {
   rootSize: number
@@ -11,7 +11,7 @@ type Theme = {
 export type TProvider = {
   children: VNodeChild
   theme?: Theme | undefined
-  mode?: "light" | "dark" | undefined
+  mode?: 'light' | 'dark' | undefined
   inversed?: boolean | undefined
   provider?: ((props: Record<string, unknown>) => VNodeChild) | undefined
 }
@@ -24,9 +24,11 @@ export type TProvider = {
  * In Pyreon, context is provided via provide() instead of React.Provider.
  */
 const Provider = ({ provider = CoreProvider, inversed, ...props }: TProvider): VNodeChild => {
-  const ctx = useContext<TProvider>(context)
+  const getCtx = useContext(context)
+  const ctx = getCtx()
 
-  const { theme, mode, provider: RocketstyleProvider, children } = { ...ctx, ...props, provider }
+  const merged = { ...ctx, ...props, provider } as unknown as TProvider & Record<string, unknown>
+  const { theme, mode, provider: RocketstyleProvider, children } = merged
 
   let newMode = MODE_DEFAULT
 
@@ -34,10 +36,11 @@ const Provider = ({ provider = CoreProvider, inversed, ...props }: TProvider): V
     newMode = inversed ? THEME_MODES_INVERSED[mode] : mode
   }
 
-  const result = RocketstyleProvider({
+  const FinalProvider = RocketstyleProvider ?? CoreProvider
+  const result = FinalProvider({
     mode: newMode,
-    isDark: newMode === "dark",
-    isLight: newMode === "light",
+    isDark: newMode === 'dark',
+    isLight: newMode === 'light',
     ...(theme !== undefined ? { theme } : {}),
     provider,
     children,

package/src/context/createLocalProvider.ts

@@ -1,8 +1,8 @@
-import { provide } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
-import type { PseudoProps } from "../types/pseudo"
-import type { ComponentFn } from "../types/utils"
-import { localContext } from "./localContext"
+import { provide } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import type { PseudoProps } from '../types/pseudo'
+import type { ComponentFn } from '../types/utils'
+import { localContext } from './localContext'
 
 type Props = PseudoProps & Record<string, any>
 
@@ -29,12 +29,6 @@ const createLocalProvider = (WrappedComponent: ComponentFn<any>) => {
     const focus = signal(false)
     const pressed = signal(false)
 
-    const pseudoState = () => ({
-      hover: hover(),
-      focus: focus(),
-      pressed: pressed(),
-    })
-
     const events = {
       onMouseEnter: (e: MouseEvent) => {
         hover.set(true)
@@ -63,9 +57,25 @@ const createLocalProvider = (WrappedComponent: ComponentFn<any>) => {
       },
     }
 
+    // Use getters so pseudo-state signals are read lazily by consumers
+    // inside their own reactive scopes — NOT eagerly during parent setup.
+    // Without getters, hover()/focus()/pressed() reads here would register
+    // as dependencies of any parent effect, causing cascading re-renders
+    // on every mouse event.
     const updatedState = {
       ...$rocketstate,
-      pseudo: { ...$rocketstate?.pseudo, ...pseudoState() },
+      pseudo: {
+        ...$rocketstate?.pseudo,
+        get hover() {
+          return hover()
+        },
+        get focus() {
+          return focus()
+        },
+        get pressed() {
+          return pressed()
+        },
+      },
     }
 
     // Provide local context for child rocketstyle components

package/src/context/localContext.ts

@@ -1,5 +1,5 @@
-import { createContext, useContext } from "@pyreon/core"
-import type { PseudoState } from "../types/pseudo"
+import { createContext, useContext } from '@pyreon/core'
+import type { PseudoState } from '../types/pseudo'
 
 type LocalContext = Partial<
   {

package/src/hoc/index.ts

@@ -1,3 +1,3 @@
-import rocketstyleAttrsHoc from "./rocketstyleAttrsHoc"
+import rocketstyleAttrsHoc from './rocketstyleAttrsHoc'
 
 export { rocketstyleAttrsHoc }

package/src/hoc/rocketstyleAttrsHoc.ts

@@ -1,14 +1,14 @@
-import { render } from "@pyreon/ui-core"
-import { useTheme } from "../hooks"
-import type { Configuration } from "../types/configuration"
-import type { ComponentFn } from "../types/utils"
-import { calculateChainOptions, removeUndefinedProps } from "../utils/attrs"
+import { render } from '@pyreon/ui-core'
+import { useTheme } from '../hooks'
+import type { Configuration } from '../types/configuration'
+import type { ComponentFn } from '../types/utils'
+import { calculateChainOptions, removeUndefinedProps } from '../utils/attrs'
 
 export type RocketStyleHOC = ({
   inversed,
   attrs,
   priorityAttrs,
-}: Pick<Configuration, "inversed" | "attrs" | "priorityAttrs">) => (
+}: Pick<Configuration, 'inversed' | 'attrs' | 'priorityAttrs'>) => (
   WrappedComponent: ComponentFn<any>,
 ) => ComponentFn<any>
 
@@ -32,14 +32,17 @@ const rocketStyleHOC: RocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
       // Keep the object reference so properties re-evaluate lazily.
       const themeAttrs = useTheme({ inversed })
 
+      // Remove undefined props not to override potential default props
+      const filteredProps = removeUndefinedProps(props)
+
+      // Read theme attrs eagerly — .attrs() callbacks run once at mount.
+      // Mode-dependent styling is handled reactively by the $rocketstyle
+      // accessor in EnhancedComponent, not by re-running attrs.
       const callbackParams = [
         themeAttrs.theme,
         { render, mode: themeAttrs.mode, isDark: themeAttrs.isDark, isLight: themeAttrs.isLight },
       ]
 
-      // Remove undefined props not to override potential default props
-      const filteredProps = removeUndefinedProps(props)
-
       const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams])
 
       const finalAttrs = calculateAttrs([

package/src/hooks/index.ts

@@ -1,4 +1,4 @@
-import usePseudoState from "./usePseudoState"
-import useTheme from "./useTheme"
+import usePseudoState from './usePseudoState'
+import useTheme from './useTheme'
 
 export { usePseudoState, useTheme }

package/src/hooks/usePseudoState.ts

@@ -1,5 +1,5 @@
-import { signal } from "@pyreon/reactivity"
-import type { PseudoActions, PseudoState } from "../types/pseudo"
+import { signal } from '@pyreon/reactivity'
+import type { PseudoActions, PseudoState } from '../types/pseudo'
 
 type UsePseudoState = ({
   onMouseEnter,
@@ -9,7 +9,7 @@ type UsePseudoState = ({
   onFocus,
   onBlur,
 }: Partial<PseudoActions>) => {
-  state: Pick<PseudoState, "hover" | "focus" | "pressed">
+  state: Pick<PseudoState, 'hover' | 'focus' | 'pressed'>
   events: PseudoActions
 }
 

package/src/hooks/useTheme.ts

@@ -1,7 +1,7 @@
-import { useContext } from "@pyreon/core"
-import { THEME_MODES_INVERSED } from "../constants"
-import { context } from "../context/context"
-import type { ThemeModeKeys } from "../types/theme"
+import { useContext } from '@pyreon/core'
+import { THEME_MODES_INVERSED } from '../constants'
+import { context } from '../context/context'
+import type { ThemeModeKeys } from '../types/theme'
 
 type Context = {
   theme: Record<string, unknown>
@@ -16,32 +16,29 @@ type UseThemeAttrs = ({ inversed }: { inversed?: boolean | undefined }) => Conte
  * Retrieves the current theme object and resolved mode from context.
  *
  * Returns an object with getter properties so that mode/isDark/isLight
- * are evaluated lazily on each access. This supports reactive mode
- * switching via PyreonUI — when PyreonUI provides `get mode()` getters,
- * rocketstyle picks up changes on every styled component re-evaluation.
- *
- * Without getters, destructuring would capture the mode value once at
- * setup time, making theme switching permanently broken.
+ * are evaluated lazily on each access. The context is a ReactiveContext,
+ * so useContext returns `() => CoreContextValue` — we call it inside
+ * each getter to ensure reactive tracking.
  */
 const useThemeAttrs: UseThemeAttrs = ({ inversed }) => {
-  // Keep the context object reference — read its properties lazily via getters.
-  // PyreonUI provides { get mode() {...} } so each access re-evaluates.
-  const ctx = useContext<Context>(context) || ({} as Partial<Context>)
+  // ReactiveContext: useContext returns () => CoreContextValue.
+  // Call the getter inside each property getter for reactive tracking.
+  const getCtx = useContext(context)
 
   return {
     get theme() {
-      return ctx.theme ?? ({} as Record<string, unknown>)
+      return getCtx().theme ?? ({} as Record<string, unknown>)
     },
     get mode() {
-      const ctxMode = ctx.mode ?? "light"
+      const ctxMode = getCtx().mode ?? 'light'
       return inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode
     },
     get isDark() {
-      const ctxDark = ctx.isDark ?? false
+      const ctxDark = getCtx().isDark ?? false
       return inversed ? !ctxDark : ctxDark
     },
     get isLight() {
-      const ctxDark = ctx.isDark ?? false
+      const ctxDark = getCtx().isDark ?? false
       const isDark = inversed ? !ctxDark : ctxDark
       return !isDark
     },

package/src/index.ts

@@ -1,10 +1,10 @@
-import type { TProvider } from "./context/context"
-import Provider, { context } from "./context/context"
-import type { Rocketstyle } from "./init"
-import rocketstyle from "./init"
-import type { IsRocketComponent } from "./isRocketComponent"
-import isRocketComponent from "./isRocketComponent"
-import type { AttrsCb } from "./types/attrs"
+import type { TProvider } from './context/context'
+import Provider, { context } from './context/context'
+import type { Rocketstyle } from './init'
+import rocketstyle from './init'
+import type { IsRocketComponent } from './isRocketComponent'
+import isRocketComponent from './isRocketComponent'
+import type { AttrsCb } from './types/attrs'
 import type {
   ConfigAttrs,
   ConsumerCb,
@@ -12,8 +12,8 @@ import type {
   ConsumerCtxCb,
   RocketComponentType,
   RocketProviderState,
-} from "./types/config"
-import type { DefaultProps } from "./types/configuration"
+} from './types/config'
+import type { DefaultProps } from './types/configuration'
 import type {
   DimensionCallbackParam,
   DimensionProps,
@@ -22,18 +22,18 @@ import type {
   ExtractDimensionProps,
   ExtractDimensions,
   TDKP,
-} from "./types/dimensions"
-import type { ComposeParam, GenericHoc } from "./types/hoc"
-import type { IRocketStyleComponent, RocketStyleComponent } from "./types/rocketstyle"
-import type { RocketStyleInterpolationProps, StylesCb, StylesDefault } from "./types/styles"
+} from './types/dimensions'
+import type { ComposeParam, GenericHoc } from './types/hoc'
+import type { IRocketStyleComponent, RocketStyleComponent } from './types/rocketstyle'
+import type { RocketStyleInterpolationProps, StylesCb, StylesDefault } from './types/styles'
 import type {
   ThemeCb,
   ThemeDefault,
   ThemeMode,
   ThemeModeCallback,
   ThemeModeKeys,
-} from "./types/theme"
-import type { ComponentFn, ElementType, ExtractProps, MergeTypes, TObj } from "./types/utils"
+} from './types/theme'
+import type { ComponentFn, ElementType, ExtractProps, MergeTypes, TObj } from './types/utils'
 
 export type {
   AttrsCb,
@@ -73,5 +73,22 @@ export type {
   TProvider,
 }
 
+/**
+ * Resolve a $rocketstyle value — handles both function accessor and plain object.
+ * Use in styled() interpolation functions when $rocketstyle may be a reactive accessor.
+ *
+ * @example
+ * ```ts
+ * styled(Component)`
+ *   color: ${(props) => resolveTheme(props.$rocketstyle).color};
+ * `
+ * ```
+ */
+export function resolveTheme<T = Record<string, unknown>>(
+  value: (() => T) | T,
+): T {
+  return typeof value === 'function' ? (value as () => T)() : value
+}
+
 export { context, isRocketComponent, Provider, rocketstyle }
 export default rocketstyle

package/src/init.ts

@@ -1,16 +1,16 @@
-import { isEmpty } from "@pyreon/ui-core"
-import { ALL_RESERVED_KEYS } from "./constants"
-import defaultDimensions from "./constants/defaultDimensions"
-import rocketComponent from "./rocketstyle"
-import type { DefaultDimensions, Dimensions } from "./types/dimensions"
-import type { RocketComponent } from "./types/rocketComponent"
-import type { ElementType } from "./types/utils"
+import { isEmpty } from '@pyreon/ui-core'
+import { ALL_RESERVED_KEYS } from './constants'
+import defaultDimensions from './constants/defaultDimensions'
+import rocketComponent from './rocketstyle'
+import type { DefaultDimensions, Dimensions } from './types/dimensions'
+import type { RocketComponent } from './types/rocketComponent'
+import type { ElementType } from './types/utils'
 import {
   getDimensionsValues,
   getKeys,
   getMultipleDimensions,
   getTransformDimensions,
-} from "./utils/dimensions"
+} from './utils/dimensions'
 
 export type Rocketstyle = <
   const D extends Dimensions = DefaultDimensions,
@@ -45,15 +45,15 @@ const validateInit = (name: string, component: unknown, dimensions: Dimensions)
   const errors: InitErrors = {}
 
   if (!component) {
-    errors.component = "Parameter `component` is missing in params!"
+    errors.component = 'Parameter `component` is missing in params!'
   }
 
   if (!name) {
-    errors.name = "Parameter `name` is missing in params!"
+    errors.name = 'Parameter `name` is missing in params!'
   }
 
   if (isEmpty(dimensions)) {
-    errors.dimensions = "Parameter `dimensions` is missing in params!"
+    errors.dimensions = 'Parameter `dimensions` is missing in params!'
   } else {
     const definedDimensions = getKeys(dimensions)
     const invalidDimension = ALL_RESERVED_KEYS.some((item) =>
@@ -73,7 +73,7 @@ const validateInit = (name: string, component: unknown, dimensions: Dimensions)
 
 const rocketstyle = (({ dimensions = defaultDimensions, useBooleans = true } = {}) =>
   ({ name, component }: { name: string; component: any }) => {
-    if (process.env.NODE_ENV !== "production") {
+    if (process.env.NODE_ENV !== 'production') {
       validateInit(name, component, dimensions)
     }
 

package/src/isRocketComponent.ts

@@ -4,8 +4,8 @@ export type IsRocketComponent = <T>(component: T) => boolean
 const isRocketComponent: IsRocketComponent = (component) => {
   if (
     component &&
-    (typeof component === "object" || typeof component === "function") &&
-    Object.hasOwn(component as object, "IS_ROCKETSTYLE")
+    (typeof component === 'object' || typeof component === 'function') &&
+    Object.hasOwn(component as object, 'IS_ROCKETSTYLE')
   ) {
     return true
   }