@vitus-labs/rocketstyle 2.0.0-alpha.9 → 2.0.0-beta.1

package/README.md

@@ -5,7 +5,7 @@ Multi-dimensional styling system for React.
 [![npm](https://img.shields.io/npm/v/@vitus-labs/rocketstyle)](https://www.npmjs.com/package/@vitus-labs/rocketstyle)
 [![license](https://img.shields.io/npm/l/@vitus-labs/rocketstyle)](https://github.com/vitus-labs/ui-system/blob/main/LICENSE)
 
-Organize component styles by dimensions — states, sizes, variants — instead of flat props. Chain theme values, attach styled-components CSS, and get full TypeScript inference. Built-in pseudo-state handling, light/dark mode, and provider/consumer patterns for parent-child state propagation.
+Organize component styles by dimensions — states, sizes, variants — instead of flat props. Chain theme values, attach CSS via the active connector, and get full TypeScript inference. Built-in pseudo-state handling, light/dark mode, and provider/consumer patterns for parent-child state propagation.
 
 ## Features
 
@@ -21,7 +21,7 @@ Organize component styles by dimensions — states, sizes, variants — instead
 ## Installation
 
 ```bash
-npm install @vitus-labs/rocketstyle @vitus-labs/core styled-components
+npm install @vitus-labs/rocketstyle @vitus-labs/core
 ```
 
 ## Quick Start
@@ -110,7 +110,7 @@ Pseudo-state keys nest directly in the theme object:
 
 ### Styles Function
 
-The `.styles()` method defines the styled-components template that receives the computed theme:
+The `.styles()` method defines the CSS template that receives the computed theme:
 
 ```tsx
 .styles((css) => css`
@@ -200,7 +200,7 @@ Button.states((theme, mode, css) => ({
 
 ### .styles(callback)
 
-Define the styled-components CSS template.
+Define the CSS template using the active connector's `css` tagged template.
 
 ```tsx
 Button.styles((css) => css`

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import { config, context, render } from "@vitus-labs/core";
-import { ComponentType, FC, FocusEventHandler, ForwardRefExoticComponent, MouseEventHandler, ReactNode } from "react";
+import { ComponentType, FC, FocusEventHandler, MouseEventHandler, ReactNode } from "react";
 
 //#region src/context/context.d.ts
 type Theme$1 = {
@@ -35,6 +35,11 @@ declare const DEFAULT_DIMENSIONS: {
     readonly propName: "multiple";
     readonly multi: true;
   };
+  readonly modifiers: {
+    readonly propName: "modifier";
+    readonly multi: true;
+    readonly transform: true;
+  };
 };
 type DefaultDimensions = typeof DEFAULT_DIMENSIONS;
 //#endregion
@@ -61,11 +66,9 @@ type PseudoProps = Partial<PseudoState & PseudoActions>;
 type TObj = Record<string, unknown>;
 type TFn = (...args: any) => any;
 type CallBackParam = TObj | TFn;
-type ElementType<T extends TObj | unknown = any> = (ComponentType<T> & Partial<{
-  [key: string]: any;
-}>) | (ForwardRefExoticComponent<T> & {
+type ElementType<T extends TObj | unknown = any> = ComponentType<T> & Partial<{
   [key: string]: any;
-});
+}>;
 type ValueOf<T> = T[keyof T];
 type ArrayOfValues<T> = T[keyof T][];
 type ArrayOfKeys<T> = Array<keyof T>;
@@ -78,11 +81,11 @@ type ExtractNullableKeys<T> = { [P in keyof T as IsAny<T[P]> extends true ? P :
 type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
 type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
 type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
-type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps extends ForwardRefExoticComponent<infer TProps> ? TProps : TComponentOrTProps;
+type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps;
 //#endregion
 //#region src/types/styles.d.ts
 interface StylesDefault {}
-type Styles<S> = S extends unknown ? StylesDefault : MergeTypes<[StylesDefault, S]>;
+type Styles<S = unknown> = StylesDefault;
 type Css = typeof config.css;
 /**
  * Props available inside `.styles()` interpolation functions.
@@ -129,15 +132,17 @@ type ExtractDimensionMulti<T extends DimensionValue> = T extends DimensionValueO
 type DimensionValuePrimitive = string;
 type DimensionValueObj = {
   propName: string;
-  multi?: boolean;
+  multi?: boolean; /** When true, this dimension is evaluated last and its values receive the accumulated theme as argument. */
+  transform?: boolean;
 };
 type DimensionValue = DimensionValuePrimitive | DimensionValueObj;
 type Dimensions = Record<string, DimensionValue>;
 type MultiKeys<T extends Dimensions = Dimensions> = Partial<Record<ExtractDimensionKey<T[keyof T]>, true>>;
-type DimensionResult<CT> = Record<string, boolean | null | Partial<CT>>;
-type DimensionObj<CT> = DimensionResult<CT>;
-type DimensionCb<T, CT> = (theme: T, mode: ThemeModeCallback, css: Css) => DimensionResult<CT>;
-type DimensionCallbackParam<T, CT> = DimensionObj<CT> | DimensionCb<T, CT>;
+type DeepPartial<T> = { [K in keyof T]?: T[K] extends ((...args: any[]) => any) ? T[K] : NonNullable<T[K]> extends Record<string, any> ? DeepPartial<NonNullable<T[K]>> | Extract<T[K], null> : T[K] };
+type DimensionResult<CT, T = any> = Record<string, boolean | null | DeepPartial<CT> | ((theme: CT, appTheme: T, mode: ThemeModeCallback, css: Css) => DeepPartial<CT>)>;
+type DimensionObj<CT, T = any> = DimensionResult<CT, T>;
+type DimensionCb<T, CT> = (theme: T, mode: ThemeModeCallback, css: Css) => DimensionResult<CT, T>;
+type DimensionCallbackParam<T, CT> = DimensionObj<CT, T> | DimensionCb<T, CT>;
 type TDKP = Record<ExtractDimensionKey<Dimensions[keyof Dimensions]>, Record<string, boolean | never | Record<string, boolean>> | unknown>;
 type DimensionProps<K extends DimensionValue, D extends Dimensions, P extends CallBackParam, DKP extends TDKP> = { [I in ExtractDimensionKey<D[keyof D]>]: I extends ExtractDimensionKey<K> ? ExtractNullableDimensionKeys<Spread<[DKP[I], NullableKeys<ReturnCbParam<P>>]>> : DKP[I] };
 type DimensionTypesHelper<DKP extends TDKP> = { [I in keyof DKP]: keyof DKP[I] };
@@ -180,6 +185,7 @@ type InitConfiguration<C, D> = {
   dimensionKeys: ArrayOfKeys<D>;
   dimensionValues: ArrayOfValues<D>;
   multiKeys: MultiKeys;
+  transformKeys: Partial<Record<string, true>>;
 };
 type Configuration<C = ElementType | unknown, D extends Dimensions = Dimensions> = InitConfiguration<C, D> & {
   provider?: boolean;
@@ -211,10 +217,6 @@ type GenericHoc = (component: ElementType) => ElementType;
 type ComposeParam = Record<string, GenericHoc | null | undefined | false>;
 //#endregion
 //#region src/types/rocketstyle.d.ts
-interface ExoticComponent<P = {}> {
-  (props: P): ReactNode;
-  readonly $$typeof: symbol;
-}
 type RocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends TObj = {}, CSS extends TObj = {}, S extends TObj = {}, HOC extends TObj = {}, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP> = IRocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP> & { [I in keyof D]: <K extends DimensionValue = D[I], P extends DimensionCallbackParam<Theme<T>, Styles<CSS>> = DimensionCallbackParam<Theme<T>, Styles<CSS>>>(param: P) => P extends DimensionCallbackParam<Theme<T>, Styles<CSS>> ? RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DimensionProps<K, D, P, DKP>> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP> };
 /**
  * @param OA   Origin component props params.
@@ -227,7 +229,10 @@ type RocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends
  * @param DKP  Dimensions key props.
  * @param DFP  Calculated final component props
  */
-interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends TObj = {}, CSS extends TObj = {}, S extends TObj = {}, HOC extends TObj = {}, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP, DFP = MergeTypes<[OA, EA, DefaultProps, ExtractDimensionProps<D, DKP, UB>]>> extends ExoticComponent<DFP> {
+interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends TObj = {}, CSS extends TObj = {}, S extends TObj = {}, HOC extends TObj = {}, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP, DFP = MergeTypes<[OA, EA, DefaultProps, ExtractDimensionProps<D, DKP, UB>]>> {
+  (props: DFP & {
+    ref?: any;
+  }): ReactNode;
   /**
    * A chaining method to define default component theme
    * @param param  _object_
@@ -365,7 +370,7 @@ interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T ex
    * }))
    * ```
    */
-  theme: <P extends TObj = {}>(param: Partial<P> | ThemeCb<P, Theme<T>>) => RocketStyleComponent<OA, EA, T, MergeTypes<[CSS, P]>, S, HOC, D, UB, DKP>;
+  theme: <P extends TObj = {}>(param: Partial<P> | Partial<Styles<CSS>> | ThemeCb<P, Theme<T>>) => RocketStyleComponent<OA, EA, T, MergeTypes<[CSS, P]>, S, HOC, D, UB, DKP>;
   /**
    * A chaining method to define default rendered styles
    * @param param  Callback of styled-components `css` function
@@ -567,11 +572,11 @@ type Rocketstyle = <D extends Dimensions = DefaultDimensions, UB extends boolean
   name: string;
   component: C;
 }) => ReturnType<RocketComponent<C, {}, {}, D, UB>>;
-declare const rocketstyle: Rocketstyle;
+declare const typedRocketstyle: Rocketstyle;
 //#endregion
 //#region src/isRocketComponent.d.ts
 type IsRocketComponent = <T>(component: T) => boolean;
 declare const isRocketComponent: IsRocketComponent;
 //#endregion
-export { type AttrsCb, type ComposeParam, type ConfigAttrs, type ConsumerCb, type ConsumerCtxCBValue, type ConsumerCtxCb, type DefaultProps, type DimensionCallbackParam, type DimensionProps, type DimensionValue, type Dimensions, type ElementType, type ExtractDimensionProps, type ExtractDimensions, type ExtractProps, type GenericHoc, type IRocketStyleComponent, type IsRocketComponent, type MergeTypes, Provider, type RocketComponentType, type RocketProviderState, type RocketStyleComponent, type RocketStyleInterpolationProps, type Rocketstyle, type StylesCb, type StylesDefault, type TDKP, type TObj, type TProvider, type ThemeCb, type ThemeDefault, type ThemeMode, type ThemeModeCallback, type ThemeModeKeys, context, rocketstyle as default, rocketstyle, isRocketComponent };
+export { type AttrsCb, type ComposeParam, type ConfigAttrs, type ConsumerCb, type ConsumerCtxCBValue, type ConsumerCtxCb, type DefaultProps, type DimensionCallbackParam, type DimensionProps, type DimensionValue, type Dimensions, type ElementType, type ExtractDimensionProps, type ExtractDimensions, type ExtractProps, type GenericHoc, type IRocketStyleComponent, type IsRocketComponent, type MergeTypes, Provider, type RocketComponentType, type RocketProviderState, type RocketStyleComponent, type RocketStyleInterpolationProps, type Rocketstyle, type StylesCb, type StylesDefault, type TDKP, type TObj, type TProvider, type ThemeCb, type ThemeDefault, type ThemeMode, type ThemeModeCallback, type ThemeModeKeys, context, typedRocketstyle as default, typedRocketstyle as rocketstyle, isRocketComponent };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -1,5 +1,5 @@
 import { Provider as Provider$1, compose, config, context, get, hoistNonReactStatics, isEmpty, merge, omit, pick, render, set, useStableValue } from "@vitus-labs/core";
-import { createContext, forwardRef, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/constants/index.ts
@@ -85,6 +85,11 @@ const DEFAULT_DIMENSIONS = {
 	multiple: {
 		propName: "multiple",
 		multi: true
+	},
+	modifiers: {
+		propName: "modifier",
+		multi: true,
+		transform: true
 	}
 };
 
@@ -197,12 +202,18 @@ const useThemeAttrs = ({ inversed }) => {
 	const { theme = {}, mode: ctxMode = "light", isDark: ctxDark } = useContext(context) || {};
 	const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
 	const isDark = inversed ? !ctxDark : ctxDark;
-	return {
+	const isLight = !isDark;
+	return useMemo(() => ({
 		theme,
 		mode,
 		isDark,
-		isLight: !isDark
-	};
+		isLight
+	}), [
+		theme,
+		mode,
+		isDark,
+		isLight
+	]);
 };
 
 //#endregion
@@ -213,13 +224,16 @@ const useThemeAttrs = ({ inversed }) => {
 * to its rocketstyle children.
 */
 const context$1 = createContext({});
+const EMPTY_CTX = { pseudo: {} };
 const useLocalContext = (consumer) => {
 	const ctx = useContext(context$1);
-	if (!consumer) return { pseudo: {} };
-	return {
-		pseudo: {},
-		...consumer((callback) => callback(ctx))
-	};
+	return useMemo(() => {
+		if (!consumer) return EMPTY_CTX;
+		return {
+			pseudo: {},
+			...consumer((callback) => callback(ctx))
+		};
+	}, [consumer, ctx]);
 };
 const LocalProvider = context$1.Provider;
 
@@ -230,43 +244,43 @@ const LocalProvider = context$1.Provider;
 * detecting pseudo-states (hover, focus, pressed) via mouse/focus events
 * and broadcasting them through local context to child rocketstyle components.
 */
-const RocketStyleProviderComponent = (WrappedComponent) => forwardRef(({ onMouseEnter, onMouseLeave, onMouseUp, onMouseDown, onFocus, onBlur, $rocketstate, ...props }, ref) => {
-	const { state: pseudoState, events: pseudoEvents } = usePseudoState({
-		onMouseEnter,
-		onMouseLeave,
-		onMouseUp,
-		onMouseDown,
-		onFocus,
-		onBlur
-	});
-	const updatedState = useStableValue({
-		...$rocketstate,
-		pseudo: {
-			...$rocketstate.pseudo,
-			...pseudoState
-		}
-	});
-	return /* @__PURE__ */ jsx(LocalProvider, {
-		value: updatedState,
-		children: /* @__PURE__ */ jsx(WrappedComponent, {
-			...props,
-			...pseudoEvents,
-			ref,
-			$rocketstate: updatedState
-		})
-	});
-});
+const RocketStyleProviderComponent = (WrappedComponent) => {
+	const HOC = ({ onMouseEnter, onMouseLeave, onMouseUp, onMouseDown, onFocus, onBlur, $rocketstate, ref, ...props }) => {
+		const { state: pseudoState, events: pseudoEvents } = usePseudoState({
+			onMouseEnter,
+			onMouseLeave,
+			onMouseUp,
+			onMouseDown,
+			onFocus,
+			onBlur
+		});
+		const updatedState = useStableValue({
+			...$rocketstate,
+			pseudo: {
+				...$rocketstate.pseudo,
+				...pseudoState
+			}
+		});
+		return /* @__PURE__ */ jsx(LocalProvider, {
+			value: updatedState,
+			children: /* @__PURE__ */ jsx(WrappedComponent, {
+				...props,
+				...pseudoEvents,
+				ref,
+				$rocketstate: updatedState
+			})
+		});
+	};
+	return HOC;
+};
 
 //#endregion
 //#region src/utils/attrs.ts
-const removeUndefinedProps = (props) => Object.keys(props).reduce((acc, key) => {
-	const currentValue = props[key];
-	if (currentValue !== void 0) return {
-		...acc,
-		[key]: currentValue
-	};
-	return acc;
-}, {});
+const removeUndefinedProps = (props) => {
+	const result = {};
+	for (const key in props) if (props[key] !== void 0) result[key] = props[key];
+	return result;
+};
 const pickStyledAttrs = (props, keywords) => Object.keys(props).reduce((acc, key) => {
 	if (keywords[key] && props[key]) acc[key] = props[key];
 	return acc;
@@ -280,23 +294,26 @@ const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensio
 	const result = {};
 	Object.keys(dimensions).forEach((item) => {
 		const pickedProp = props[item];
-		const valueTypes = ["number", "string"];
+		const t = typeof pickedProp;
 		if (multiKeys?.[item] && Array.isArray(pickedProp)) result[item] = pickedProp;
-		else if (valueTypes.includes(typeof pickedProp)) result[item] = pickedProp;
+		else if (t === "string" || t === "number") result[item] = pickedProp;
 		else result[item] = void 0;
 	});
 	if (useBooleans) {
-		const propsKeys = Object.keys(props).reverse();
+		const propsKeys = Object.keys(props);
 		Object.entries(result).forEach(([key, value]) => {
 			const isMultiKey = multiKeys[key];
 			if (!value) {
 				let newDimensionValue;
-				const keywords = Object.keys(dimensions[key]);
-				if (isMultiKey) newDimensionValue = propsKeys.filter((key) => keywords.includes(key));
-				else newDimensionValue = propsKeys.find((key) => {
-					if (keywords.includes(key) && props[key]) return key;
-					return false;
-				});
+				const keywordSet = new Set(Object.keys(dimensions[key]));
+				if (isMultiKey) newDimensionValue = propsKeys.filter((key) => keywordSet.has(key));
+				else for (let i = propsKeys.length - 1; i >= 0; i--) {
+					const k = propsKeys[i];
+					if (keywordSet.has(k) && props[k]) {
+						newDimensionValue = k;
+						break;
+					}
+				}
 				result[key] = newDimensionValue;
 			}
 		});
@@ -315,27 +332,30 @@ const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensio
 const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
 	const calculateAttrs = calculateChainOptions(attrs);
 	const calculatePriorityAttrs = calculateChainOptions(priorityAttrs);
-	const Enhanced = (WrappedComponent) => forwardRef((props, ref) => {
-		const { theme, mode, isDark, isLight } = useThemeAttrs({ inversed });
-		const callbackParams = [theme, {
-			render,
-			mode,
-			isDark,
-			isLight
-		}];
-		const filteredProps = removeUndefinedProps(props);
-		const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
-		const finalAttrs = calculateAttrs([{
-			...prioritizedAttrs,
-			...filteredProps
-		}, ...callbackParams]);
-		return /* @__PURE__ */ jsx(WrappedComponent, {
-			$rocketstyleRef: ref,
-			...prioritizedAttrs,
-			...finalAttrs,
-			...filteredProps
-		});
-	});
+	const Enhanced = (WrappedComponent) => {
+		const HOC = ({ ref, ...props }) => {
+			const { theme, mode, isDark, isLight } = useThemeAttrs({ inversed });
+			const callbackParams = [theme, {
+				render,
+				mode,
+				isDark,
+				isLight
+			}];
+			const filteredProps = removeUndefinedProps(props);
+			const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
+			const finalAttrs = calculateAttrs([{
+				...prioritizedAttrs,
+				...filteredProps
+			}, ...callbackParams]);
+			return /* @__PURE__ */ jsx(WrappedComponent, {
+				$rocketstyleRef: ref,
+				...prioritizedAttrs,
+				...finalAttrs,
+				...filteredProps
+			});
+		};
+		return HOC;
+	};
 	return Enhanced;
 };
 
@@ -396,6 +416,12 @@ const getMultipleDimensions = (obj) => getValues(obj).reduce((accumulator, value
 	}
 	return accumulator;
 }, {});
+const getTransformDimensions = (obj) => getValues(obj).reduce((accumulator, value) => {
+	if (typeof value === "object") {
+		if (value.transform === true) accumulator[value.propName] = true;
+	}
+	return accumulator;
+}, {});
 
 //#endregion
 //#region src/utils/statics.ts
@@ -424,12 +450,17 @@ const removeNullableValues = (obj) => Object.entries(obj).filter(([, v]) => v !=
 
 //#endregion
 //#region src/utils/theme.ts
+const MODE_CALLBACK_BRAND = Symbol.for("vl.themeModeCallback");
 /** Creates a mode-switching function that returns the light or dark value based on the active mode. */
-const themeModeCallback = (light, dark) => (mode) => {
-	if (!mode || mode === "light") return light;
-	return dark;
+const themeModeCallback = (light, dark) => {
+	const fn = (mode) => {
+		if (!mode || mode === "light") return light;
+		return dark;
+	};
+	fn.__brand = MODE_CALLBACK_BRAND;
+	return fn;
 };
-const isModeCallback = (value) => typeof value === "function" && value.toString() === themeModeCallback().toString();
+const isModeCallback = (value) => typeof value === "function" && value.__brand === MODE_CALLBACK_BRAND;
 const getThemeFromChain = (options, theme) => {
 	const result = {};
 	if (!options || isEmpty(options)) return result;
@@ -445,15 +476,22 @@ const getDimensionThemes = (theme, options) => {
 		return acc;
 	}, result);
 };
-const getTheme = ({ rocketstate, themes, baseTheme }) => {
-	let finalTheme = { ...baseTheme };
+const getTheme = ({ rocketstate, themes, baseTheme, transformKeys, appTheme }) => {
+	const finalTheme = { ...baseTheme };
+	const deferredTransforms = [];
 	Object.entries(rocketstate).forEach(([key, value]) => {
 		const keyTheme = themes[key];
-		if (Array.isArray(value)) value.forEach((item) => {
-			finalTheme = merge({}, finalTheme, keyTheme[item]);
-		});
-		else finalTheme = merge({}, finalTheme, keyTheme[value]);
+		const isTransform = transformKeys?.[key];
+		const mergeValue = (item) => {
+			const val = keyTheme[item];
+			if (val == null) return;
+			if (isTransform && typeof val === "function") deferredTransforms.push(val);
+			else merge(finalTheme, val);
+		};
+		if (Array.isArray(value)) value.forEach(mergeValue);
+		else mergeValue(value);
 	});
+	for (const transform of deferredTransforms) merge(finalTheme, transform(finalTheme, appTheme ?? {}, themeModeCallback, config.css));
 	return finalTheme;
 };
 const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) => {
@@ -466,6 +504,32 @@ const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) =
 
 //#endregion
 //#region src/rocketstyle.tsx
+/**
+* Core rocketstyle component factory. Creates a fully-featured React component
+* that integrates theme management (with light/dark mode support), multi-tier
+* WeakMap caching, dimension-based styling props, pseudo-state detection, and
+* chainable static methods (`.attrs()`, `.theme()`, `.styles()`, `.config()`, etc.).
+* @module rocketstyle
+*/
+const arraysEqual = (a, b) => {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+};
+const isShallowEqualRocketstate = (a, b) => {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const aKeys = Object.keys(a);
+	if (aKeys.length !== Object.keys(b).length) return false;
+	for (const k of aKeys) {
+		const av = a[k];
+		const bv = b[k];
+		if (av === bv) continue;
+		if (Array.isArray(av) && Array.isArray(bv) && arraysEqual(av, bv)) continue;
+		return false;
+	}
+	return true;
+};
 /** Clones the current configuration and merges new options, returning a fresh rocketComponent. */
 const cloneAndEnhance = (defaultOpts, opts) => rocketComponent({
 	...defaultOpts,
@@ -489,7 +553,7 @@ const cloneAndEnhance = (defaultOpts, opts) => rocketComponent({
 * chainable static enhancers attached to the returned component.
 */
 const rocketComponent = (options) => {
-	const { component, styles } = options;
+	const { component, styles, transformKeys } = options;
 	const { styled } = config;
 	const _calculateStylingAttrs = calculateStylingAttrs({
 		multiKeys: options.multiKeys,
@@ -502,7 +566,7 @@ const rocketComponent = (options) => {
 	const RenderComponent = options.provider ? RocketStyleProviderComponent(STYLED_COMPONENT) : STYLED_COMPONENT;
 	const ThemeManager$1 = new ThemeManager();
 	const hocsFuncs = [rocketStyleHOC(options), ...calculateHocsFuncs(options.compose)];
-	const EnhancedComponent = forwardRef(({ $rocketstyleRef, ...props }, ref) => {
+	const EnhancedComponent = ({ $rocketstyleRef, ref, ...props }) => {
 		const internalRef = useRocketstyleRef({
 			$rocketstyleRef,
 			ref
@@ -550,11 +614,21 @@ const rocketComponent = (options) => {
 			...rocketstate,
 			pseudo: pseudoRocketstate
 		};
-		const rocketstyle = getTheme({
-			rocketstate,
+		const rocketstateRef = useRef(rocketstate);
+		if (!isShallowEqualRocketstate(rocketstateRef.current, rocketstate)) rocketstateRef.current = rocketstate;
+		const stableRocketstate = rocketstateRef.current;
+		const rocketstyle = useMemo(() => getTheme({
+			rocketstate: stableRocketstate,
 			themes: currentModeThemes,
-			baseTheme: currentModeBaseTheme
-		});
+			baseTheme: currentModeBaseTheme,
+			transformKeys,
+			appTheme: theme
+		}), [
+			stableRocketstate,
+			currentModeThemes,
+			currentModeBaseTheme,
+			theme
+		]);
 		const finalProps = {
 			...omit(mergeProps, [
 				...RESERVED_STYLING_PROPS_KEYS,
@@ -582,7 +656,7 @@ const rocketComponent = (options) => {
 			}
 		}
 		return /* @__PURE__ */ jsx(RenderComponent, { ...finalProps });
-	});
+	};
 	const RocketComponent = compose(...hocsFuncs)(EnhancedComponent);
 	RocketComponent.IS_ROCKETSTYLE = true;
 	RocketComponent.displayName = componentName;
@@ -655,31 +729,44 @@ const validateInit = (name, component, dimensions) => {
 	}
 	if (!isEmpty(errors)) throw Error(JSON.stringify(errors));
 };
-const rocketstyle = ({ dimensions = DEFAULT_DIMENSIONS, useBooleans = true } = {}) => ({ name, component }) => {
-	if (process.env.NODE_ENV !== "production") validateInit(name, component, dimensions);
-	return rocketComponent({
-		name,
-		component,
-		useBooleans,
-		dimensions,
-		dimensionKeys: getKeys(dimensions),
-		dimensionValues: getDimensionsValues(dimensions),
-		multiKeys: getMultipleDimensions(dimensions),
-		styled: true
-	});
+/**
+* Generic implementation. The `D | DefaultDimensions` runtime fallback is
+* narrowed to `D` via a single cast — semantically correct because when no
+* user dimensions are supplied, `D` *is* the default (its type-parameter
+* default is `DefaultDimensions`). This single boundary cast replaces the
+* file-wide `@ts-nocheck` previously used here.
+*/
+const rocketstyle = (params) => {
+	const dimensions = params?.dimensions ?? DEFAULT_DIMENSIONS;
+	const useBooleans = params?.useBooleans ?? true;
+	return ({ name, component }) => {
+		if (process.env.NODE_ENV !== "production") validateInit(name, component, dimensions);
+		return rocketComponent({
+			name,
+			component,
+			useBooleans,
+			dimensions,
+			dimensionKeys: getKeys(dimensions),
+			dimensionValues: getDimensionsValues(dimensions),
+			multiKeys: getMultipleDimensions(dimensions),
+			transformKeys: getTransformDimensions(dimensions),
+			styled: true
+		});
+	};
 };
+const typedRocketstyle = rocketstyle;
 
 //#endregion
 //#region src/isRocketComponent.tsx
 const isRocketComponent = (component) => {
-	if (component && typeof component === "object" && component !== null && Object.hasOwn(component, "IS_ROCKETSTYLE")) return true;
+	if (component && (typeof component === "object" || typeof component === "function") && Object.hasOwn(component, "IS_ROCKETSTYLE")) return true;
 	return false;
 };
 
 //#endregion
 //#region src/index.ts
-var src_default = rocketstyle;
+var src_default = typedRocketstyle;
 
 //#endregion
-export { Provider, context, src_default as default, isRocketComponent, rocketstyle };
+export { Provider, context, src_default as default, isRocketComponent, typedRocketstyle as rocketstyle };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/rocketstyle",
-  "version": "2.0.0-alpha.9+f2f47db",
+  "version": "2.0.0-beta.1",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -14,6 +14,7 @@
     "types": "./lib/index.d.ts"
   },
   "types": "./lib/index.d.ts",
+  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -60,19 +61,19 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "cover": "coveralls < .coverage/lcov.info",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "version": "node ../../scripts/sync-peer-deps.mjs"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^1.4.0",
+    "@vitus-labs/core": "2.0.0-beta.1",
     "react": ">= 19"
   },
   "devDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.9+f2f47db",
-    "@vitus-labs/elements": "2.0.0-alpha.9+f2f47db",
-    "@vitus-labs/tools-rolldown": "^1.6.0",
-    "@vitus-labs/tools-storybook": "^1.6.0",
-    "@vitus-labs/tools-typescript": "^1.6.0",
-    "@vitus-labs/unistyle": "2.0.0-alpha.9+f2f47db"
-  },
-  "gitHead": "f2f47db887d6a846ee5f9e96f290c59cdde4772a"
+    "@vitus-labs/core": "workspace:*",
+    "@vitus-labs/elements": "workspace:*",
+    "@vitus-labs/tools-rolldown": "2.2.0",
+    "@vitus-labs/tools-storybook": "2.2.0",
+    "@vitus-labs/tools-typescript": "2.1.0",
+    "@vitus-labs/unistyle": "workspace:*"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023-present Vit Bokisch
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.