@animus-ui/system 0.1.0-next.49 → 0.1.0-next.59

package/README.md

@@ -65,38 +65,47 @@ const Box = ds.styles({}).system({ surface: true, space: true }).asElement('div'
 ### 3. Build components
 
 ```tsx
-const Button = ds
+export const Alert = ds
   .styles({
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    border: 'none',
-    borderRadius: 4,
-    fontFamily: '{fonts.body}',
+    display: 'flex',
+    alignItems: 'flex-start',
+    p: 12,
+    borderRadius: '4px',
+    fontSize: 14,
+    lineHeight: '1.5',
   })
   .variant({
-    size: {
-      prop: 'size',
-      variants: {
-        small: { fontSize: 14, padding: '{space.sm}' },
-        large: { fontSize: 18, padding: '{space.md} {space.lg}' },
-      },
-    },
-    intent: {
-      prop: 'intent',
-      variants: {
-        primary: { backgroundColor: '{colors.primary}', color: 'white' },
-        ghost: { backgroundColor: 'transparent', color: '{colors.primary}' },
-      },
+    prop: 'variant',
+    variants: {
+      filled: { color: 'background' },
+      outline: { bg: 'transparent', borderWidth: '1px', borderStyle: 'solid' },
     },
   })
-  .states({
-    disabled: { opacity: 0.5, pointerEvents: 'none' },
+  .variant({
+    prop: 'intent',
+    variants: {
+      info: { bg: 'primary' },
+      danger: { bg: 'danger' },
+      success: { bg: 'secondary' },
+    },
   })
-  .system({ space: true })
-  .asElement('button');
-
-<Button size="large" intent="primary" m={8} disabled />;
+  .compound(
+    { variant: 'outline', intent: 'info' },
+    { borderColor: 'primary', color: 'primary' }
+  )
+  .compound(
+    { variant: 'outline', intent: 'danger' },
+    { borderColor: 'danger', color: 'danger' }
+  )
+  .compound(
+    { variant: 'outline', intent: 'success' },
+    { borderColor: 'secondary', color: 'secondary' }
+  )
+  .surface({ space: true })
+  .asElement('div');
+
+
+<Alert variant="filled" intent="success" m={8} disabled />;
 ```
 
 ## Builder Chain

package/dist/compose.d.ts

@@ -10,16 +10,15 @@ import type { AnyBrandedComponent, ComposedFamily, SharedConfig } from './types/
  * - **Wire**: The extraction pipeline emits composed variant CSS
  *   rules — two per shared variant option per child (inheritance +
  *   override) within @layer variants.
- * - **Context**: When `context: true`, shared variant prop values
- *   are also propagated via React context for portal-mounted children
- *   that CSS descendant selectors cannot reach.
  * - **Seal**: Output components are plain ForwardRefExoticComponent —
  *   no `.extend()`, no builder methods. One-way door from builder-land
  *   to component-land.
+ *
+ * For React context propagation (portal-crossing), use
+ * `composeWithContext` from `@animus-ui/system/compose-with-context`.
  */
 export declare function compose<Slots extends Record<string, AnyBrandedComponent>, const Shared extends SharedConfig<Slots>>(slots: Slots, options: {
     shared: Shared;
     name?: string;
-    context?: boolean;
 }): ComposedFamily<Slots>;
 //# sourceMappingURL=compose.d.ts.map

package/dist/compose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,mBAAmB,EACnB,cAAc,EACd,YAAY,EACb,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CACrB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,EACjD,KAAK,CAAC,MAAM,SAAS,YAAY,CAAC,KAAK,CAAC,EAExC,KAAK,EAAE,KAAK,EAKZ,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC5D,cAAc,CAAC,KAAK,CAAC,CA0DvB"}
+{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,mBAAmB,EACnB,cAAc,EACd,YAAY,EACb,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CACrB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,EACjD,KAAK,CAAC,MAAM,SAAS,YAAY,CAAC,KAAK,CAAC,EAExC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GACzC,cAAc,CAAC,KAAK,CAAC,CAyBvB"}

package/dist/compose.js

@@ -0,0 +1,36 @@
+import { createElement, forwardRef } from "react";
+//#region src/compose.ts
+/**
+* Compose independently-authored Animus components into a sealed,
+* namespaced component family with shared variant propagation via
+* CSS cascade.
+*
+* - **Enforce**: TypeScript ensures shared keys exist on Root (the
+*   cascade source). Non-Root slots that have the key consume it from
+*   CSS inheritance; slots without the key are unaffected.
+* - **Wire**: The extraction pipeline emits composed variant CSS
+*   rules — two per shared variant option per child (inheritance +
+*   override) within @layer variants.
+* - **Seal**: Output components are plain ForwardRefExoticComponent —
+*   no `.extend()`, no builder methods. One-way door from builder-land
+*   to component-land.
+*
+* For React context propagation (portal-crossing), use
+* `composeWithContext` from `@animus-ui/system/compose-with-context`.
+*/
+function compose(slots, options) {
+	const familyName = options.name ?? "Composed";
+	const result = {};
+	for (const [name, SourceComponent] of Object.entries(slots)) {
+		const Wrapper = forwardRef((props, ref) => createElement(SourceComponent, {
+			...props,
+			ref
+		}, props.children));
+		Wrapper.displayName = `${familyName}.${name}`;
+		result[name] = Wrapper;
+	}
+	if (!("Root" in result)) throw new Error("compose(): No \"Root\" slot found. The root slot key must be exactly \"Root\" (PascalCase).");
+	return result;
+}
+//#endregion
+export { compose };

package/dist/composeWithContext.d.ts

@@ -0,0 +1,30 @@
+import { type ForwardRefExoticComponent } from 'react';
+import type { AnyBrandedComponent, ComposedFamily, SharedConfig } from './types/component';
+/**
+ * Compose components into a sealed family with shared variant propagation
+ * via React context. Use this when children may be rendered in portals
+ * or other React subtrees that escape the DOM hierarchy (where CSS
+ * descendant selectors cannot reach).
+ *
+ * This function uses `createContext` and `useContext` — it is client-only.
+ * For CSS-only propagation (RSC-safe), use `compose` from the barrel or
+ * `@animus-ui/system/compose`.
+ */
+export declare function composeWithContext<Slots extends Record<string, AnyBrandedComponent>, const Shared extends SharedConfig<Slots>>(slots: Slots, options: {
+    shared: Shared;
+    name?: string;
+}): ComposedFamily<Slots>;
+/**
+ * createComposedFamilyWithContext — extraction-time replacement for composeWithContext().
+ *
+ * The transform emitter replaces `composeWithContext({ Root, Body }, { shared, name })`
+ * with `createComposedFamilyWithContext({ Root, Body }, { name, sharedKeys })`.
+ *
+ * Client-only: uses createContext and useContext. Files containing this function
+ * receive a 'use client' directive from the transform emitter.
+ */
+export declare function createComposedFamilyWithContext(slots: Record<string, ForwardRefExoticComponent<any>>, config: {
+    name: string;
+    sharedKeys: string[];
+}): Record<string, ForwardRefExoticComponent<any>>;
+//# sourceMappingURL=composeWithContext.d.ts.map

package/dist/composeWithContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeWithContext.d.ts","sourceRoot":"","sources":["../src/composeWithContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,yBAAyB,EAI/B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,mBAAmB,EACnB,cAAc,EACd,YAAY,EACb,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,EACjD,KAAK,CAAC,MAAM,SAAS,YAAY,CAAC,KAAK,CAAC,EAExC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GACzC,cAAc,CAAC,KAAK,CAAC,CA8CvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,+BAA+B,CAC7C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,yBAAyB,CAAC,GAAG,CAAC,CAAC,EACrD,MAAM,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,EAAE,CAAA;CAAE,GAC7C,MAAM,CAAC,MAAM,EAAE,yBAAyB,CAAC,GAAG,CAAC,CAAC,CAqChD"}

package/dist/composeWithContext.js

@@ -0,0 +1,79 @@
+"use client";
+import { createContext, createElement, forwardRef, useContext } from "react";
+//#region src/composeWithContext.ts
+/**
+* Compose components into a sealed family with shared variant propagation
+* via React context. Use this when children may be rendered in portals
+* or other React subtrees that escape the DOM hierarchy (where CSS
+* descendant selectors cannot reach).
+*
+* This function uses `createContext` and `useContext` — it is client-only.
+* For CSS-only propagation (RSC-safe), use `compose` from the barrel or
+* `@animus-ui/system/compose`.
+*/
+function composeWithContext(slots, options) {
+	const familyName = options.name ?? "Composed";
+	const sharedKeySet = new Set(Object.keys(options.shared));
+	const FamilyCtx = createContext({});
+	const result = {};
+	for (const [name, SourceComponent] of Object.entries(slots)) {
+		let Wrapper;
+		if (name === "Root") Wrapper = forwardRef((props, ref) => {
+			const shared = {};
+			for (const key of sharedKeySet) if (key in props) shared[key] = props[key];
+			return createElement(SourceComponent, {
+				...props,
+				ref
+			}, createElement(FamilyCtx.Provider, { value: shared }, props.children));
+		});
+		else Wrapper = forwardRef((props, ref) => {
+			return createElement(SourceComponent, {
+				...useContext(FamilyCtx),
+				...props,
+				ref
+			});
+		});
+		Wrapper.displayName = `${familyName}.${name}`;
+		result[name] = Wrapper;
+	}
+	if (!("Root" in result)) throw new Error("composeWithContext(): No \"Root\" slot found. The root slot key must be exactly \"Root\" (PascalCase).");
+	return result;
+}
+/**
+* createComposedFamilyWithContext — extraction-time replacement for composeWithContext().
+*
+* The transform emitter replaces `composeWithContext({ Root, Body }, { shared, name })`
+* with `createComposedFamilyWithContext({ Root, Body }, { name, sharedKeys })`.
+*
+* Client-only: uses createContext and useContext. Files containing this function
+* receive a 'use client' directive from the transform emitter.
+*/
+function createComposedFamilyWithContext(slots, config) {
+	const { name, sharedKeys } = config;
+	const Ctx = createContext({});
+	const keySet = new Set(sharedKeys);
+	const result = {};
+	for (const [slotName, SourceComponent] of Object.entries(slots)) {
+		let Wrapper;
+		if (slotName === "Root") Wrapper = forwardRef((props, ref) => {
+			const shared = {};
+			for (const key of keySet) if (key in props) shared[key] = props[key];
+			return createElement(SourceComponent, {
+				...props,
+				ref
+			}, createElement(Ctx.Provider, { value: shared }, props.children));
+		});
+		else Wrapper = forwardRef((props, ref) => {
+			return createElement(SourceComponent, {
+				...useContext(Ctx),
+				...props,
+				ref
+			});
+		});
+		Wrapper.displayName = `${name}.${slotName}`;
+		result[slotName] = Wrapper;
+	}
+	return result;
+}
+//#endregion
+export { composeWithContext, createComposedFamilyWithContext };

package/dist/{createClassResolver-BnSwnxrG.js → createComposedFamily-DaXNK-0M.js}

@@ -212,4 +212,28 @@ function createClassResolver(className, config, systemPropMap, dynamicPropConfig
 	};
 }
 //#endregion
-export { createComponent as n, createClassResolver as t };
+//#region src/runtime/createComposedFamily.ts
+/**
+* createComposedFamily — extraction-time replacement for compose().
+*
+* The transform emitter replaces `compose({ Root, Body }, { shared, name })`
+* with `createComposedFamily({ Root, Body }, { name })`.
+*
+* RSC-safe: uses only forwardRef and createElement — no createContext,
+* no useContext, no hooks.
+*/
+function createComposedFamily(slots, config) {
+	const { name } = config;
+	const result = {};
+	for (const [slotName, SourceComponent] of Object.entries(slots)) {
+		const Wrapper = forwardRef((props, ref) => createElement(SourceComponent, {
+			...props,
+			ref
+		}, props.children));
+		Wrapper.displayName = `${name}.${slotName}`;
+		result[slotName] = Wrapper;
+	}
+	return result;
+}
+//#endregion
+export { createClassResolver as n, createComponent as r, createComposedFamily as t };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/groups/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBR,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IT,CAAC;AA8BX,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQP,CAAC;AAWX,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCP,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUb,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAed,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAIV,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CT,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBb,CAAC;AAwCX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGR,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;CAWd,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;CAEP,CAAC;AAEX,eAAO,MAAM,IAAI;;;;CAEP,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/groups/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBR,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JT,CAAC;AA8BX,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQP,CAAC;AAWX,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCP,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUb,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAed,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAIV,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CT,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Bb,CAAC;AAwCX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGR,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;CAWd,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;CAEP,CAAC;AAEX,eAAO,MAAM,IAAI;;;;CAEP,CAAC"}

package/dist/groups/index.js

@@ -1,4 +1,4 @@
-import { a as borderShorthand, i as gridItemRatio, n as size, r as gridItem, s as createScale } from "../size-BjymBo7z.js";
+import { a as borderShorthand, i as gridItemRatio, n as size, r as gridItem, s as createScale } from "../size-DzHm9Iw0.js";
 //#region src/groups/index.ts
 const color = {
 	color: {

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { AnimusExtended, AnimusExtendedWithAll } from './AnimusExtended';
 export { compose } from './compose';
 export { createComponent } from './runtime';
 export { createClassResolver } from './runtime/createClassResolver';
+export { createComposedFamily } from './runtime/createComposedFamily';
 export type { GlobalStyleBlock, GlobalStyleMap, GlobalStylesFactory, SerializedConfig, SystemInstance, } from './SystemBuilder';
 export { createSystem, SystemBuilder } from './SystemBuilder';
 export { createScale, numericOrStringScale, numericScale, stringScale, } from './scales/createScale';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,YAAY,EACZ,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,kBAAkB,EAClB,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,MAAM,EACN,uBAAuB,EACvB,eAAe,EACf,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EACL,eAAe,EACf,KAAK,cAAc,EACnB,KAAK,WAAW,GACjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE/D,YAAY,EACV,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,aAAa,EACb,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,aAAa,GACd,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,UAAU,GACX,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,KAAK,EACL,aAAa,EACb,WAAW,GACZ,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAIzE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,YAAY,EACZ,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,kBAAkB,EAClB,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,MAAM,EACN,uBAAuB,EACvB,eAAe,EACf,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EACL,eAAe,EACf,KAAK,cAAc,EACnB,KAAK,WAAW,GACjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE/D,YAAY,EACV,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,aAAa,EACb,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,aAAa,GACd,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,UAAU,GACX,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,KAAK,EACL,aAAa,EACb,WAAW,GACZ,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
-import { n as createComponent, t as createClassResolver } from "./createClassResolver-BnSwnxrG.js";
-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-BjymBo7z.js";
-import { createContext, createElement, forwardRef, useContext } from "react";
+import { n as createClassResolver, r as createComponent, t as createComposedFamily } from "./createComposedFamily-DaXNK-0M.js";
+import { compose } from "./compose.js";
+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-DzHm9Iw0.js";
 //#region src/utils/deepMerge.ts
 /**
 * Deep merge utility — replaces lodash.merge for variant accumulation.
@@ -228,59 +228,6 @@ var Animus = class extends AnimusWithBase {
 	}
 };
 //#endregion
-//#region src/compose.ts
-/**
-* Compose independently-authored Animus components into a sealed,
-* namespaced component family with shared variant propagation via
-* CSS cascade.
-*
-* - **Enforce**: TypeScript ensures shared keys exist on Root (the
-*   cascade source). Non-Root slots that have the key consume it from
-*   CSS inheritance; slots without the key are unaffected.
-* - **Wire**: The extraction pipeline emits composed variant CSS
-*   rules — two per shared variant option per child (inheritance +
-*   override) within @layer variants.
-* - **Context**: When `context: true`, shared variant prop values
-*   are also propagated via React context for portal-mounted children
-*   that CSS descendant selectors cannot reach.
-* - **Seal**: Output components are plain ForwardRefExoticComponent —
-*   no `.extend()`, no builder methods. One-way door from builder-land
-*   to component-land.
-*/
-function compose(slots, options) {
-	const familyName = options.name ?? "Composed";
-	const useCtx = options.context ?? false;
-	const FamilyCtx = useCtx ? createContext({}) : null;
-	const sharedKeySet = useCtx ? new Set(Object.keys(options.shared)) : null;
-	const result = {};
-	for (const [name, SourceComponent] of Object.entries(slots)) {
-		let Wrapper;
-		if (name === "Root" && FamilyCtx && sharedKeySet) Wrapper = forwardRef((props, ref) => {
-			const shared = {};
-			for (const key of sharedKeySet) if (key in props) shared[key] = props[key];
-			return createElement(SourceComponent, {
-				...props,
-				ref
-			}, createElement(FamilyCtx.Provider, { value: shared }, props.children));
-		});
-		else if (FamilyCtx) Wrapper = forwardRef((props, ref) => {
-			return createElement(SourceComponent, {
-				...useContext(FamilyCtx),
-				...props,
-				ref
-			});
-		});
-		else Wrapper = forwardRef((props, ref) => createElement(SourceComponent, {
-			...props,
-			ref
-		}));
-		Wrapper.displayName = `${familyName}.${name}`;
-		result[name] = Wrapper;
-	}
-	if (!("Root" in result)) throw new Error("compose(): No \"Root\" slot found. The root slot key must be exactly \"Root\" (PascalCase).");
-	return result;
-}
-//#endregion
 //#region src/selectors.ts
 /**
 * Built-in selector aliases.
@@ -909,4 +856,4 @@ function buildVariableCss(rootVariables, breakpointVariables, modeVariables) {
 	return parts.join("\n\n");
 }
 //#endregion
-export { Animus, AnimusExtended, AnimusExtendedWithAll, AnimusWithAll, BUILT_IN_SELECTORS, SystemBuilder, ThemeBuilder, borderShorthand, compose, createClassResolver, createComponent, createScale, createSystem, createTheme, createTransform, gridItem, gridItemRatio, numericOrStringScale, numericScale, percentageOrAbsolute, size, stringScale };
+export { Animus, AnimusExtended, AnimusExtendedWithAll, AnimusWithAll, BUILT_IN_SELECTORS, SystemBuilder, ThemeBuilder, borderShorthand, compose, createClassResolver, createComponent, createComposedFamily, createScale, createSystem, createTheme, createTransform, gridItem, gridItemRatio, numericOrStringScale, numericScale, percentageOrAbsolute, size, stringScale };

package/dist/runtime/createComposedFamily.d.ts

@@ -0,0 +1,16 @@
+/**
+ * createComposedFamily — extraction-time replacement for compose().
+ *
+ * The transform emitter replaces `compose({ Root, Body }, { shared, name })`
+ * with `createComposedFamily({ Root, Body }, { name })`.
+ *
+ * RSC-safe: uses only forwardRef and createElement — no createContext,
+ * no useContext, no hooks.
+ */
+import { type ForwardRefExoticComponent } from 'react';
+interface ComposedFamilyConfig {
+    name: string;
+}
+export declare function createComposedFamily(slots: Record<string, ForwardRefExoticComponent<any>>, config: ComposedFamilyConfig): Record<string, ForwardRefExoticComponent<any>>;
+export {};
+//# sourceMappingURL=createComposedFamily.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createComposedFamily.d.ts","sourceRoot":"","sources":["../../src/runtime/createComposedFamily.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAEL,KAAK,yBAAyB,EAG/B,MAAM,OAAO,CAAC;AAEf,UAAU,oBAAoB;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,yBAAyB,CAAC,GAAG,CAAC,CAAC,EACrD,MAAM,EAAE,oBAAoB,GAC3B,MAAM,CAAC,MAAM,EAAE,yBAAyB,CAAC,GAAG,CAAC,CAAC,CAiBhD"}

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,EAAyC,UAAU,EAAkB,MAAM,OAAO,CAAC;AAE1F,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EAEtB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,UAAU,eAAgB,SAAQ,mBAAmB;CAAG;AAIxD,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;AAgBF;;;;;;;;;;;;;;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,CAiIjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,UAAU,EAEX,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EAEtB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,UAAU,eAAgB,SAAQ,mBAAmB;CAAG;AAIxD,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;AAgBF;;;;;;;;;;;;;;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,CAmIjB"}

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

@@ -1 +1 @@
-{"version":3,"file":"resolveClasses.d.ts","sourceRoot":"","sources":["../../src/runtime/resolveClasses.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,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,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,MAAM,CACpC,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;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,EACtB,WAAW,EAAE,MAAM,GAClB,MAAM,CAQR;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAWxD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,OAAO,EACd,EAAE,EAAE;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,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,GACA,MAAM,CAaR;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,MAAM,EAAE,mBAAmB,EAC3B,aAAa,CAAC,EAAE,aAAa,EAC7B,iBAAiB,CAAC,EAAE,iBAAiB,GACpC,eAAe,CAuGjB"}
+{"version":3,"file":"resolveClasses.d.ts","sourceRoot":"","sources":["../../src/runtime/resolveClasses.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,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,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,MAAM,CACpC,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;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,EACtB,WAAW,EAAE,MAAM,GAClB,MAAM,CAQR;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAWxD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,OAAO,EACd,EAAE,EAAE;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,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,GACA,MAAM,CAaR;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,MAAM,EAAE,mBAAmB,EAC3B,aAAa,CAAC,EAAE,aAAa,EAC7B,iBAAiB,CAAC,EAAE,iBAAiB,GACpC,eAAe,CAyGjB"}

package/dist/runtime-entry.d.ts

@@ -6,4 +6,5 @@
  */
 export { createComponent } from './runtime';
 export { createClassResolver } from './runtime/createClassResolver';
+export { createComposedFamily } from './runtime/createComposedFamily';
 //# sourceMappingURL=runtime-entry.d.ts.map

package/dist/runtime-entry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime-entry.d.ts","sourceRoot":"","sources":["../src/runtime-entry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"runtime-entry.d.ts","sourceRoot":"","sources":["../src/runtime-entry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/runtime-entry.js

@@ -1,2 +1,2 @@
-import { n as createComponent, t as createClassResolver } from "./createClassResolver-BnSwnxrG.js";
-export { createClassResolver, createComponent };
+import { n as createClassResolver, r as createComponent, t as createComposedFamily } from "./createComposedFamily-DaXNK-0M.js";
+export { createClassResolver, createComponent, createComposedFamily };

package/dist/size-DzHm9Iw0.js

@@ -0,0 +1,93 @@
+//#region src/scales/createScale.ts
+const createScale = () => [];
+const numericScale = [];
+const stringScale = [];
+const numericOrStringScale = [];
+//#endregion
+//#region src/transforms/createTransform.ts
+function createTransform(name, fn) {
+	const wrapper = (value, property, props) => fn(value, property, props);
+	Object.defineProperty(wrapper, "name", { value: name });
+	return Object.assign(wrapper, { transformName: name });
+}
+//#endregion
+//#region src/transforms/border.ts
+/**
+* Self-contained transform: all logic inlined in the callback.
+* No external references — satisfies the extraction constraint.
+*/
+const borderShorthand = createTransform("borderShorthand", (val) => typeof val === "number" ? `${val}px solid currentColor` : val);
+//#endregion
+//#region src/transforms/grid.ts
+/**
+* Self-contained transform: all logic inlined in the callback.
+* No external references — satisfies the extraction constraint.
+*/
+const gridItem = createTransform("gridItem", (item) => {
+	const map = {
+		max: "max-content",
+		min: "min-content"
+	};
+	const strItem = String(item);
+	return `minmax(0, ${/^[0-9]*$/.test(strItem) ? `${strItem}fr` : map[strItem] ?? strItem})`;
+});
+/**
+* Self-contained transform: all logic inlined in the callback.
+* Duplicates grid-item-to-template logic to avoid cross-transform reference.
+*/
+const gridItemRatio = createTransform("gridItemRatio", (val) => {
+	const toTemplate = (item) => {
+		return `minmax(0, ${/^[0-9]*$/.test(item) ? `${item}fr` : {
+			max: "max-content",
+			min: "min-content"
+		}[item] ?? item})`;
+	};
+	const repeat = (item, count) => {
+		const template = toTemplate(item);
+		return count > 1 ? `repeat(${count}, ${template})` : template;
+	};
+	if (typeof val === "number") return repeat("1", val);
+	const items = String(val).split(":");
+	let repeated = ["", 0];
+	let gridStyle = "";
+	for (let i = 0; i < items.length + 1; i += 1) {
+		const delimiter = gridStyle.length > 0 ? " " : "";
+		const curr = items[i];
+		if (repeated?.[0] !== curr) {
+			if (repeated[0].length) gridStyle += delimiter + repeat(repeated[0], repeated[1]);
+			if (curr) repeated = [curr, 1];
+		} else repeated[1] += 1;
+	}
+	return gridStyle;
+});
+//#endregion
+//#region src/transforms/size.ts
+/**
+* Convert a numeric coordinate to a CSS value.
+* Exported for non-extraction use — NOT referenced from the createTransform callback.
+*/
+const percentageOrAbsolute = (coordinate) => {
+	if (coordinate === 0) return coordinate;
+	if (coordinate <= 1 && coordinate >= -1) return `${coordinate * 100}%`;
+	return `${coordinate}px`;
+};
+/**
+* Self-contained transform: all logic inlined in the callback.
+* No external references — satisfies the extraction constraint.
+*/
+const size = createTransform("size", (value) => {
+	const toSize = (n) => {
+		if (n === 0) return n;
+		if (n <= 1 && n >= -1) return `${n * 100}%`;
+		return `${n}px`;
+	};
+	if (typeof value === "number") return toSize(value);
+	const strValue = value;
+	if (strValue.includes("calc")) return strValue;
+	const [match, number, unit] = /(-?\d*\.?\d+)(%|\w*)/.exec(strValue) || [];
+	if (match === void 0) return strValue;
+	const numericValue = parseFloat(number);
+	return !unit ? toSize(numericValue) : `${numericValue}${unit}`;
+});
+//#endregion
+export { borderShorthand as a, numericOrStringScale as c, gridItemRatio as i, numericScale as l, size as n, createTransform as o, gridItem as r, createScale as s, percentageOrAbsolute as t, stringScale as u };

package/dist/transforms/border.d.ts

@@ -1,2 +1,6 @@
+/**
+ * Self-contained transform: all logic inlined in the callback.
+ * No external references — satisfies the extraction constraint.
+ */
 export declare const borderShorthand: import("./createTransform").NamedTransform;
 //# sourceMappingURL=border.d.ts.map

package/dist/transforms/border.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../src/transforms/border.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,4CAE3B,CAAC"}
+{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../src/transforms/border.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,eAAe,4CAE3B,CAAC"}

package/dist/transforms/grid.d.ts

@@ -1,5 +1,18 @@
+/**
+ * Self-contained transform: all logic inlined in the callback.
+ * No external references — satisfies the extraction constraint.
+ */
 export declare const gridItem: import("./createTransform").NamedTransform;
+/**
+ * Convert a grid item value to a CSS template string.
+ * Exported for non-extraction use — NOT referenced from createTransform callbacks.
+ */
+export declare const toGridTemplate: (item: string) => string;
 export declare const repeatGridItem: (item: string, count: number) => string;
 export declare const parseGridRatio: (val: string) => string;
+/**
+ * Self-contained transform: all logic inlined in the callback.
+ * Duplicates grid-item-to-template logic to avoid cross-transform reference.
+ */
 export declare const gridItemRatio: import("./createTransform").NamedTransform;
 //# sourceMappingURL=grid.d.ts.map

package/dist/transforms/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/transforms/grid.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,QAAQ,4CAMnB,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,WAGzD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,WAkBzC,CAAC;AAEF,eAAO,MAAM,aAAa,4CAIxB,CAAC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/transforms/grid.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,QAAQ,4CAUnB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,KAAG,MAO7C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,WAGzD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,WAkBzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,4CAoCxB,CAAC"}

package/dist/transforms/size.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Convert a numeric coordinate to a CSS value.
+ * Exported for non-extraction use — NOT referenced from the createTransform callback.
+ */
 export declare const percentageOrAbsolute: (coordinate: number) => string | 0;
+/**
+ * Self-contained transform: all logic inlined in the callback.
+ * No external references — satisfies the extraction constraint.
+ */
 export declare const size: import("./createTransform").NamedTransform;
 //# sourceMappingURL=size.d.ts.map

package/dist/transforms/size.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../src/transforms/size.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,GAAI,YAAY,MAAM,eAQtD,CAAC;AAIF,eAAO,MAAM,IAAI,4CAoBf,CAAC"}
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../src/transforms/size.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,YAAY,MAAM,eAQtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI,4CA0Bf,CAAC"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@animus-ui/system",
-  "version": "0.1.0-next.49",
+  "version": "0.1.0-next.59",
   "description": "Animus design system builder — tokens, prop groups, global styles",
   "author": "codecaaron <airrobb@gmail.com>",
   "license": "MIT",
   "type": "module",
+  "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,6 +18,14 @@
       "types": "./dist/groups/index.d.ts",
       "import": "./dist/groups/index.js"
     },
+    "./compose": {
+      "types": "./dist/compose.d.ts",
+      "import": "./dist/compose.js"
+    },
+    "./compose-with-context": {
+      "types": "./dist/composeWithContext.d.ts",
+      "import": "./dist/composeWithContext.js"
+    },
     "./runtime": {
       "types": "./dist/runtime-entry.d.ts",
       "import": "./dist/runtime-entry.js",
@@ -54,7 +63,7 @@
     "compile": "tsc --noEmit"
   },
   "dependencies": {
-    "@animus-ui/properties": "0.1.0-next.49"
+    "@animus-ui/properties": "0.1.0-next.59"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"

package/dist/size-BjymBo7z.js

@@ -1,70 +0,0 @@
-//#region src/scales/createScale.ts
-const createScale = () => [];
-const numericScale = [];
-const stringScale = [];
-const numericOrStringScale = [];
-//#endregion
-//#region src/transforms/createTransform.ts
-function createTransform(name, fn) {
-	const wrapper = (value, property, props) => fn(value, property, props);
-	Object.defineProperty(wrapper, "name", { value: name });
-	return Object.assign(wrapper, { transformName: name });
-}
-//#endregion
-//#region src/transforms/utils.ts
-const numberToTemplate = (val, template) => typeof val === "number" ? template(val) : val;
-//#endregion
-//#region src/transforms/border.ts
-const borderShorthand = createTransform("borderShorthand", (val) => numberToTemplate(val, (width) => `${width}px solid currentColor`));
-//#endregion
-//#region src/transforms/grid.ts
-const gridItemMap = {
-	max: "max-content",
-	min: "min-content"
-};
-const unitlessNumber = /* @__PURE__ */ new RegExp(/^[0-9]*$/);
-const isUnitlessNumber = (val) => unitlessNumber.test(val);
-const gridItem = createTransform("gridItem", (item) => {
-	const strItem = String(item);
-	return `minmax(0, ${isUnitlessNumber(strItem) ? `${strItem}fr` : gridItemMap[strItem] ?? strItem})`;
-});
-const repeatGridItem = (item, count) => {
-	const template = gridItem(item);
-	return count > 1 ? `repeat(${count}, ${template})` : template;
-};
-const parseGridRatio = (val) => {
-	const items = val.split(":");
-	let repeated = ["", 0];
-	let gridStyle = "";
-	for (let i = 0; i < items.length + 1; i += 1) {
-		const delimiter = gridStyle.length > 0 ? " " : "";
-		const curr = items[i];
-		if (repeated?.[0] !== curr) {
-			if (repeated[0].length) gridStyle += delimiter + repeatGridItem(...repeated);
-			if (curr) repeated = [curr, 1];
-		} else repeated[1] += 1;
-	}
-	return gridStyle;
-};
-const gridItemRatio = createTransform("gridItemRatio", (val) => {
-	return typeof val === "number" ? repeatGridItem("1", val) : parseGridRatio(val);
-});
-//#endregion
-//#region src/transforms/size.ts
-const percentageOrAbsolute = (coordinate) => {
-	if (coordinate === 0) return coordinate;
-	if (coordinate <= 1 && coordinate >= -1) return `${coordinate * 100}%`;
-	return `${coordinate}px`;
-};
-const valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
-const size = createTransform("size", (value) => {
-	if (typeof value === "number") return percentageOrAbsolute(value);
-	const strValue = value;
-	if (strValue.includes("calc")) return strValue;
-	const [match, number, unit] = valueWithUnit.exec(strValue) || [];
-	if (match === void 0) return strValue;
-	const numericValue = parseFloat(number);
-	return !unit ? percentageOrAbsolute(numericValue) : `${numericValue}${unit}`;
-});
-//#endregion
-export { borderShorthand as a, numericOrStringScale as c, gridItemRatio as i, numericScale as l, size as n, createTransform as o, gridItem as r, createScale as s, percentageOrAbsolute as t, stringScale as u };