@animus-ui/system 0.1.0-next.8 → 0.1.0-next.9

package/dist/index.js

@@ -1,7 +1,67 @@
 import { a as borderShorthand, c as numericOrStringScale, i as gridItemRatio, l as numericScale, n as size, o as createTransform, r as gridItem, s as createScale, t as percentageOrAbsolute, u as stringScale } from "./size-Dge_rsuz.js";
-import { createElement, forwardRef } from "react";
+import { createElement, forwardRef, useRef } from "react";
 //#region src/runtime/index.ts
 /**
+* CSS properties that accept unitless numeric values.
+* Bare numerics on properties NOT in this set receive `px`.
+* Matches @emotion/unitless and React DOM's style handling.
+*/
+const UNITLESS_PROPERTIES = new Set([
+	"animation-iteration-count",
+	"border-image-outset",
+	"border-image-slice",
+	"border-image-width",
+	"box-flex",
+	"box-flex-group",
+	"box-ordinal-group",
+	"column-count",
+	"columns",
+	"flex",
+	"flex-grow",
+	"flex-positive",
+	"flex-shrink",
+	"flex-negative",
+	"flex-order",
+	"font-weight",
+	"grid-area",
+	"grid-column",
+	"grid-column-end",
+	"grid-column-span",
+	"grid-column-start",
+	"grid-row",
+	"grid-row-end",
+	"grid-row-span",
+	"grid-row-start",
+	"line-clamp",
+	"line-height",
+	"opacity",
+	"order",
+	"orphans",
+	"tab-size",
+	"widows",
+	"z-index",
+	"zoom",
+	"fill-opacity",
+	"flood-opacity",
+	"stop-opacity",
+	"stroke-dasharray",
+	"stroke-dashoffset",
+	"stroke-miterlimit",
+	"stroke-opacity",
+	"stroke-width"
+]);
+/**
+* Apply unit fallback to a value for a given CSS property.
+* Unitless numeric values on properties that expect length units receive `px`.
+*/
+function applyUnitFallback(value, cssProperty) {
+	if (typeof value === "number") {
+		if (UNITLESS_PROPERTIES.has(cssProperty)) return String(value);
+		return `${value}px`;
+	}
+	return String(value);
+}
+/**
 * Serialize a system prop value to a lookup key matching the Rust
 * css_generator's serialize_value_key output format:
 * - Numbers and strings → their string representation
@@ -13,6 +73,19 @@ function serializeValueKey(value) {
 	return String(value);
 }
 /**
+* Resolve a dynamic prop value through scale lookup → transform → unit fallback.
+* Scale lookup uses pre-resolved values shipped from the extraction pipeline.
+*/
+function resolveValue(value, dc) {
+	const key = String(value);
+	const scaleResolved = dc.scaleValues?.[key];
+	if (scaleResolved != null) {
+		const transformed = dc.transform ? dc.transform(scaleResolved) : scaleResolved;
+		return String(transformed);
+	}
+	return applyUnitFallback(dc.transform ? dc.transform(value) : value, dc.varName);
+}
+/**
 * Create a lightweight component that applies extracted CSS class names.
 * Replaces Emotion's styled() for extracted components.
 *
@@ -23,8 +96,11 @@ function serializeValueKey(value) {
 *
 * The optional systemPropMap parameter provides the shared prop→value→className
 * lookup table, served as a virtual module by the Vite plugin.
+*
+* The optional dynamicPropConfig parameter provides CSS variable fallback
+* metadata for props with detected dynamic usage.
 */
-function createComponent(element, className, config, systemPropMap) {
+function createComponent(element, className, config, systemPropMap, dynamicPropConfig) {
 	const variantProps = config.variants ? Object.keys(config.variants) : [];
 	const stateProps = config.states || [];
 	const systemPropNames = config.systemPropNames || [];
@@ -36,6 +112,8 @@ function createComponent(element, className, config, systemPropMap) {
 	const isComponentElement = typeof element !== "string";
 	const Component = forwardRef((props, ref) => {
 		const classes = [className];
+		const prevDynKey = useRef("");
+		const prevDynStyle = useRef(null);
 		if (config.variants) for (const [prop, vc] of Object.entries(config.variants)) {
 			const value = props[prop] ?? vc.default;
 			if (value != null) classes.push(`${className}--${prop}-${value}`);
@@ -43,11 +121,45 @@ function createComponent(element, className, config, systemPropMap) {
 		if (config.states) {
 			for (const state of config.states) if (props[state]) classes.push(`${className}--${state}`);
 		}
-		if (systemPropMap && systemPropNames.length > 0) {
-			for (const propName of systemPropNames) if (propName in props) {
-				const key = serializeValueKey(props[propName]);
-				const cls = systemPropMap[propName]?.[key];
+		let dynKeyParts;
+		let dynStyle;
+		if (systemPropNames.length > 0) {
+			const { customPropMap, customDynamicConfig } = config;
+			for (const propName of systemPropNames) {
+				if (!(propName in props)) continue;
+				const propValue = props[propName];
+				if (propValue == null) continue;
+				const key = serializeValueKey(propValue);
+				const cls = customPropMap?.[propName]?.[key] ?? systemPropMap?.[propName]?.[key];
 				if (cls) classes.push(cls);
+				else {
+					const dc = customDynamicConfig?.[propName] ?? dynamicPropConfig?.[propName];
+					if (dc) {
+						if (!dynKeyParts) dynKeyParts = [];
+						if (!dynStyle) dynStyle = {};
+						if (typeof propValue === "object" && propValue !== null && !Array.isArray(propValue)) for (const [bp, bpVal] of Object.entries(propValue)) {
+							if (bpVal == null) continue;
+							if (bp === "_") {
+								classes.push(dc.slotClass);
+								const finalVal = resolveValue(bpVal, dc);
+								dynStyle[dc.varName] = finalVal;
+								dynKeyParts.push(`${dc.varName}:${finalVal}`);
+							} else {
+								classes.push(`${dc.slotClass}-${bp}`);
+								const varName = `${dc.varName}-${bp}`;
+								const finalVal = resolveValue(bpVal, dc);
+								dynStyle[varName] = finalVal;
+								dynKeyParts.push(`${varName}:${finalVal}`);
+							}
+						}
+						else {
+							classes.push(dc.slotClass);
+							const finalVal = resolveValue(propValue, dc);
+							dynStyle[dc.varName] = finalVal;
+							dynKeyParts.push(`${dc.varName}:${finalVal}`);
+						}
+					}
+				}
 			}
 		}
 		if (props.className) classes.push(props.className);
@@ -61,6 +173,17 @@ function createComponent(element, className, config, systemPropMap) {
 			if (!isComponentElement) {}
 			domProps[key] = value;
 		}
+		if (dynKeyParts && dynStyle) {
+			const dynKey = dynKeyParts.join("|");
+			if (dynKey !== prevDynKey.current) {
+				prevDynKey.current = dynKey;
+				prevDynStyle.current = dynStyle;
+			}
+			domProps.style = props.style ? {
+				...props.style,
+				...prevDynStyle.current
+			} : prevDynStyle.current;
+		}
 		return createElement(element, domProps);
 	});
 	Component.displayName = className;

package/dist/runtime/index.d.ts

@@ -7,8 +7,17 @@ interface ComponentConfig {
     variants?: Record<string, VariantConfig>;
     states?: string[];
     systemPropNames?: string[];
+    customPropMap?: Record<string, Record<string, string>>;
+    customDynamicConfig?: DynamicPropConfig;
 }
 type SystemPropMap = Record<string, Record<string, string>>;
+type DynamicPropConfig = Record<string, {
+    varName: string;
+    slotClass: string;
+    transformName?: string;
+    transform?: (value: string | number) => string | number;
+    scaleValues?: Record<string, string>;
+}>;
 type ElementType = string | React.ComponentType<any>;
 type AnimusComponent = ReturnType<typeof forwardRef> & {
     extend: () => never;
@@ -24,7 +33,10 @@ type AnimusComponent = ReturnType<typeof forwardRef> & {
  *
  * The optional systemPropMap parameter provides the shared prop→value→className
  * lookup table, served as a virtual module by the Vite plugin.
+ *
+ * The optional dynamicPropConfig parameter provides CSS variable fallback
+ * metadata for props with detected dynamic usage.
  */
-export declare function createComponent(element: ElementType, className: string, config: ComponentConfig, systemPropMap?: SystemPropMap): AnimusComponent;
+export declare function createComponent(element: ElementType, className: string, config: ComponentConfig, systemPropMap?: SystemPropMap, dynamicPropConfig?: DynamicPropConfig): AnimusComponent;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/runtime/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAI5D,KAAK,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAErD,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD,MAAM,EAAE,MAAM,KAAK,CAAC;CACrB,CAAC;AAqBF;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,eAAe,EACvB,aAAa,CAAC,EAAE,aAAa,GAC5B,eAAe,CAwFjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,UAAU,EAAU,MAAM,OAAO,CAAC;AAE1D,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACvD,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;CACzC;AAED,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5D,KAAK,iBAAiB,GAAG,MAAM,CAC7B,MAAM,EACN;IACE,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC,CACF,CAAC;AAIF,KAAK,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAErD,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD,MAAM,EAAE,MAAM,KAAK,CAAC;CACrB,CAAC;AAwHF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,eAAe,EACvB,aAAa,CAAC,EAAE,aAAa,EAC7B,iBAAiB,CAAC,EAAE,iBAAiB,GACpC,eAAe,CAkKjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animus-ui/system",
-  "version": "0.1.0-next.8",
+  "version": "0.1.0-next.9",
   "description": "Animus design system builder — tokens, prop groups, global styles",
   "author": "codecaaron <airrobb@gmail.com>",
   "license": "MIT",