@vitus-labs/rocketstyle 1.4.2 → 1.4.3-alpha.1

package/lib/index.d.ts

@@ -38,6 +38,25 @@ declare const DEFAULT_DIMENSIONS: {
 };
 type DefaultDimensions = typeof DEFAULT_DIMENSIONS;
 //#endregion
+//#region src/types/pseudo.d.ts
+type PseudoActions = {
+  onMouseEnter: MouseEventHandler;
+  onMouseLeave: MouseEventHandler;
+  onMouseDown: MouseEventHandler;
+  onMouseUp: MouseEventHandler;
+  onFocus: FocusEventHandler;
+  onBlur: FocusEventHandler;
+};
+type PseudoState = {
+  active: boolean;
+  hover: boolean;
+  focus: boolean;
+  pressed: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+};
+type PseudoProps = Partial<PseudoState & PseudoActions>;
+//#endregion
 //#region src/types/utils.d.ts
 type TObj = Record<string, unknown>;
 type TFn = (...args: any) => any;
@@ -65,7 +84,27 @@ type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType
 interface StylesDefault {}
 type Styles<S> = S extends unknown ? StylesDefault : MergeTypes<[StylesDefault, S]>;
 type Css = typeof config.css;
-type StylesCb = (css: Css) => ReturnType<Css>;
+/**
+ * Props available inside `.styles()` interpolation functions.
+ *
+ * - `$rocketstyle` — computed theme (inferred from `.theme()` chain)
+ * - `$rocketstate` — active dimension values + pseudo state
+ */
+type RocketStyleInterpolationProps<CSS extends TObj = TObj> = {
+  $rocketstyle: CSS;
+  $rocketstate: Record<string, string | string[]> & {
+    pseudo: Partial<PseudoState>;
+  };
+} & Record<string, any>;
+/**
+ * A tagged-template css function whose interpolation functions
+ * receive typed props including `$rocketstyle` and `$rocketstate`.
+ *
+ * When used via `.styles()`, `CSS` is inferred from the chain's
+ * accumulated `.theme()` calls, so both props are typed automatically.
+ */
+type RocketCss<CSS extends TObj = TObj> = (strings: TemplateStringsArray, ...values: Array<string | number | boolean | null | undefined | ((props: RocketStyleInterpolationProps<CSS>) => any) | any[]>) => any;
+type StylesCb<CSS extends TObj = TObj> = (css: RocketCss<CSS>) => ReturnType<Css>;
 type StylesCbArray = StylesCb[];
 //#endregion
 //#region src/constants/index.d.ts
@@ -107,25 +146,6 @@ type DimensionBooleanAttrs<DKP extends TDKP> = Partial<Record<ValueOf<DimensionT
 type ExtractDimensionProps<D extends Dimensions, DKP extends TDKP, UB extends boolean> = UB extends true ? Partial<ExtractNullableDimensionKeys<DimensionObjAttrs<D, DKP> & DimensionBooleanAttrs<DKP>>> : Partial<ExtractNullableDimensionKeys<DimensionObjAttrs<D, DKP>>>;
 type ExtractDimensions<D extends Dimensions, DKP extends TDKP> = ExtractNullableDimensionKeys<DimensionObjAttrs<D, DKP>>;
 //#endregion
-//#region src/types/pseudo.d.ts
-type PseudoActions = {
-  onMouseEnter: MouseEventHandler;
-  onMouseLeave: MouseEventHandler;
-  onMouseDown: MouseEventHandler;
-  onMouseUp: MouseEventHandler;
-  onFocus: FocusEventHandler;
-  onBlur: FocusEventHandler;
-};
-type PseudoState = {
-  active: boolean;
-  hover: boolean;
-  focus: boolean;
-  pressed: boolean;
-  disabled: boolean;
-  readOnly: boolean;
-};
-type PseudoProps = Partial<PseudoState & PseudoActions>;
-//#endregion
 //#region src/types/config.d.ts
 type RocketComponentType = ElementType & {
   IS_ROCKETSTYLE: true;
@@ -345,7 +365,7 @@ interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T ex
    * }))
    * ```
    */
-  theme: <P extends TObj | unknown = unknown>(param: P extends TObj ? Partial<MergeTypes<[Styles<CSS>, P]>> | ThemeCb<MergeTypes<[Styles<CSS>, P]>, Theme<T>> : Partial<Styles<CSS>> | ThemeCb<Styles<CSS>, Theme<T>>) => P extends TObj ? RocketStyleComponent<OA, EA, T, MergeTypes<[CSS, P]>, S, HOC, D, UB, DKP> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
+  theme: <P extends TObj = {}>(param: Partial<P> | 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
@@ -358,7 +378,7 @@ interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T ex
    * const newElement = base.styles(css => css``)
    * ```
    */
-  styles: (param: StylesCb) => RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
+  styles: (param: StylesCb<CSS>) => RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
   /**
    * A chaining method to define high-order components to wrap
    * the defined component
@@ -553,5 +573,5 @@ declare const rocketstyle: Rocketstyle;
 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 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, rocketstyle as default, rocketstyle, isRocketComponent };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -259,14 +259,11 @@ const RocketStyleProviderComponent = (WrappedComponent) => forwardRef(({ onMouse
 
 //#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,9 +277,9 @@ 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) {
@@ -496,7 +493,7 @@ const rocketComponent = (options) => {
 		useBooleans: options.useBooleans
 	});
 	const componentName = options.name ?? options.component.displayName ?? options.component.name;
-	const STYLED_COMPONENT = component.IS_ROCKETSTYLE ?? options.styled !== true ? component : styled(component)`
+	const STYLED_COMPONENT = component.IS_ROCKETSTYLE ?? options.styled !== true ? component : styled(component, { boost: true })`
           ${calculateStyles(styles)};
         `;
 	const RenderComponent = options.provider ? RocketStyleProviderComponent(STYLED_COMPONENT) : STYLED_COMPONENT;
@@ -550,11 +547,21 @@ const rocketComponent = (options) => {
 			...rocketstate,
 			pseudo: pseudoRocketstate
 		};
-		const rocketstyle = getTheme({
+		let rsKey = "";
+		for (const k in rocketstate) {
+			const v = rocketstate[k];
+			rsKey += k;
+			rsKey += Array.isArray(v) ? v.join(",") : v;
+		}
+		const rocketstyle = useMemo(() => getTheme({
 			rocketstate,
 			themes: currentModeThemes,
 			baseTheme: currentModeBaseTheme
-		});
+		}), [
+			rsKey,
+			currentModeThemes,
+			currentModeBaseTheme
+		]);
 		const finalProps = {
 			...omit(mergeProps, [
 				...RESERVED_STYLING_PROPS_KEYS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/rocketstyle",
-  "version": "1.4.2",
+  "version": "1.4.3-alpha.1+cf4e0a6",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -9,6 +9,7 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
+    "source": "./src/index.ts",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
   },
@@ -66,12 +67,12 @@
     "react": ">= 19"
   },
   "devDependencies": {
-    "@vitus-labs/core": "1.4.2",
-    "@vitus-labs/elements": "1.4.2",
+    "@vitus-labs/core": "1.4.3-alpha.1+cf4e0a6",
+    "@vitus-labs/elements": "1.4.3-alpha.1+cf4e0a6",
     "@vitus-labs/tools-rolldown": "^1.6.0",
     "@vitus-labs/tools-storybook": "^1.6.0",
     "@vitus-labs/tools-typescript": "^1.6.0",
-    "@vitus-labs/unistyle": "1.4.2"
+    "@vitus-labs/unistyle": "1.4.3-alpha.1+cf4e0a6"
   },
-  "gitHead": "f12f43c61149964ff4f3f4b80cb6f92da2825915"
+  "gitHead": "cf4e0a6230687c5c7acc2e07a3248bae4ae55f07"
 }