@mapples/render 1.0.2 → 1.0.4

package/dist/components/Render.d.ts

@@ -44,6 +44,6 @@ import { RenderProps } from '../types';
  * />
  * ```
  */
-declare const Render: ({ root, CustomRenderComponent }: RenderProps) => import("react").JSX.Element;
+declare const Render: ({ root, state, CustomRenderComponent }: RenderProps) => import("react").JSX.Element;
 export default Render;
 //# sourceMappingURL=Render.d.ts.map

package/dist/components/Render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Render.d.ts","sourceRoot":"","sources":["../../src/components/Render.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,QAAA,MAAM,MAAM,GAAI,iCAAiC,WAAW,gCAM3D,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Render.d.ts","sourceRoot":"","sources":["../../src/components/Render.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,QAAA,MAAM,MAAM,GAAI,wCAAwC,WAAW,gCAQlE,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Render.js

@@ -1,3 +1,4 @@
+import { RenderStateContextProvider } from '../context/RenderStateContext';
 import RenderComponent from './RenderComponent';
 /**
  * Main render component that renders a component tree from a root component definition.
@@ -44,8 +45,10 @@ import RenderComponent from './RenderComponent';
  * />
  * ```
  */
-const Render = ({ root, CustomRenderComponent }) => {
-    return CustomRenderComponent ? (<CustomRenderComponent {...root}/>) : (<RenderComponent {...root}/>);
+const Render = ({ root, state, CustomRenderComponent }) => {
+    return CustomRenderComponent ? (<CustomRenderComponent {...root}/>) : (<RenderStateContextProvider value={state}>
+      <RenderComponent {...root}/>
+    </RenderStateContextProvider>);
 };
 export default Render;
 //# sourceMappingURL=Render.js.map

package/dist/components/Render.js.map

@@ -1 +1 @@
-{"version":3,"file":"Render.js","sourceRoot":"","sources":["../../src/components/Render.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,qBAAqB,EAAe,EAAE,EAAE;IAC9D,OAAO,qBAAqB,CAAC,CAAC,CAAC,CAC7B,CAAC,qBAAqB,CAAC,IAAI,IAAI,CAAC,EAAG,CACpC,CAAC,CAAC,CAAC,CACF,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,EAAG,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Render.js","sourceRoot":"","sources":["../../src/components/Render.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAG3E,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,qBAAqB,EAAe,EAAE,EAAE;IACrE,OAAO,qBAAqB,CAAC,CAAC,CAAC,CAC7B,CAAC,qBAAqB,CAAC,IAAI,IAAI,CAAC,EAAG,CACpC,CAAC,CAAC,CAAC,CACF,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACvC;MAAA,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,EAC5B;IAAA,EAAE,0BAA0B,CAAC,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/RenderComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderComponent.d.ts","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,CA+B5C,CAAC;AAQF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"RenderComponent.d.ts","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAQjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,CAsC5C,CAAC;AAQF,eAAe,eAAe,CAAC"}

package/dist/components/RenderComponent.js

@@ -2,6 +2,8 @@ import { memo } from 'react';
 import { useDataProps } from '@mapples/state';
 import { map } from 'lodash';
 import { useRender } from '../hooks';
+import useConditionalStyled from '../hooks/useConditionalStyled';
+import useRefProps from '../hooks/useRefProps';
 /**
  * Default implementation of a renderable component.
  *
@@ -37,9 +39,11 @@ import { useRender } from '../hooks';
  *
  * @throws {Error} If the component type is not registered in the render context
  */
-const RenderComponent = ({ type, props, dataProps, children, childComponents, }) => {
+const RenderComponent = ({ type, props, dataProps, children, refProps, childComponents, }) => {
     const { components } = useRender();
     const propsWithData = useDataProps(dataProps);
+    const resolvedRefProps = useRefProps(refProps);
+    const propsWithConditional = useConditionalStyled(props);
     const Component = components[type].Component;
     if (!Component) {
         return null;
@@ -48,7 +52,7 @@ const RenderComponent = ({ type, props, dataProps, children, childComponents, })
         const renderComponentProps = childComponents[child];
         return (<RenderComponentMemorized {...renderComponentProps} key={renderComponentProps.id}/>);
     };
-    return (<Component {...props} {...propsWithData}>
+    return (<Component {...propsWithConditional} {...propsWithData} {...resolvedRefProps}>
       {map(children, renderChildren)}
     </Component>);
 };

package/dist/components/RenderComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderComponent.js","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,IAAI,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,eAAe,GAA4B,CAAC,EAChD,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IACnC,MAAM,aAAa,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,UAAU,CAAC,IAA+B,CAAC,CAAC,SAAS,CAAC;IAExE,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;QACvC,MAAM,oBAAoB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;QACpD,OAAO,CACL,CAAC,wBAAwB,CACvB,IAAI,oBAAoB,CAAC,CACzB,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAC7B,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,CACtC;MAAA,CAAC,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAChC;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,wBAAwB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;AAEvD,eAAe,eAAe,CAAC"}
+{"version":3,"file":"RenderComponent.js","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,IAAI,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAG/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,eAAe,GAA4B,CAAC,EAChD,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IACnC,MAAM,aAAa,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/C,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAG,UAAU,CAAC,IAA+B,CAAC,CAAC,SAAS,CAAC;IAExE,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;QACvC,MAAM,oBAAoB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;QACpD,OAAO,CACL,CAAC,wBAAwB,CACvB,IAAI,oBAAoB,CAAC,CACzB,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAC7B,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CACR,IAAI,oBAAoB,CAAC,CACzB,IAAI,aAAa,CAAC,CAClB,IAAI,gBAAgB,CAAC,CAErB;MAAA,CAAC,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAChC;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,wBAAwB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;AAEvD,eAAe,eAAe,CAAC"}

package/dist/components/RenderProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderProvider.d.ts","sourceRoot":"","sources":["../../src/components/RenderProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAS5D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RenderProvider.d.ts","sourceRoot":"","sources":["../../src/components/RenderProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAU5D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/RenderProvider.js

@@ -25,8 +25,8 @@ import { RenderContextProvider } from '../context';
  * );
  * ```
  */
-const RenderProvider = ({ components, children, }) => {
-    return (<RenderContextProvider value={{ components }}>
+const RenderProvider = ({ components, children, assets, }) => {
+    return (<RenderContextProvider value={{ components, assets }}>
       {children}
     </RenderContextProvider>);
 };

package/dist/components/RenderProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderProvider.js","sourceRoot":"","sources":["../../src/components/RenderProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,cAAc,GAA6C,CAAC,EAChE,UAAU,EACV,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAC3C;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,qBAAqB,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RenderProvider.js","sourceRoot":"","sources":["../../src/components/RenderProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,cAAc,GAA6C,CAAC,EAChE,UAAU,EACV,QAAQ,EACR,MAAM,GACP,EAAE,EAAE;IACH,OAAO,CACL,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CACnD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,qBAAqB,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/context/RenderContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderContext.d.ts","sourceRoot":"","sources":["../../src/context/RenderContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,4CAEjB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,qBAAqB,6CAAyB,CAAC;AAE5D,eAAe,aAAa,CAAC"}
+{"version":3,"file":"RenderContext.d.ts","sourceRoot":"","sources":["../../src/context/RenderContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,4CAGjB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,qBAAqB,6CAAyB,CAAC;AAE5D,eAAe,aAAa,CAAC"}

package/dist/context/RenderContext.js

@@ -14,6 +14,7 @@ import { createContext } from 'react';
  */
 const RenderContext = createContext({
     components: {},
+    assets: {},
 });
 /**
  * Provider component for the RenderContext.

package/dist/context/RenderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderContext.js","sourceRoot":"","sources":["../../src/context/RenderContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC;;;;;;;;;;;;GAYG;AACH,MAAM,aAAa,GAAG,aAAa,CAAoB;IACrD,UAAU,EAAE,EAAE;CACf,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,QAAQ,CAAC;AAE5D,eAAe,aAAa,CAAC"}
+{"version":3,"file":"RenderContext.js","sourceRoot":"","sources":["../../src/context/RenderContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC;;;;;;;;;;;;GAYG;AACH,MAAM,aAAa,GAAG,aAAa,CAAoB;IACrD,UAAU,EAAE,EAAE;IACd,MAAM,EAAE,EAAE;CACX,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,QAAQ,CAAC;AAE5D,eAAe,aAAa,CAAC"}

package/dist/context/RenderStateContext.d.ts

@@ -0,0 +1,5 @@
+import { StateCondition } from '../types';
+declare const RenderStateContext: import("react").Context<Record<string, StateCondition> | undefined>;
+export declare const RenderStateContextProvider: import("react").Provider<Record<string, StateCondition> | undefined>;
+export default RenderStateContext;
+//# sourceMappingURL=RenderStateContext.d.ts.map

package/dist/context/RenderStateContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderStateContext.d.ts","sourceRoot":"","sources":["../../src/context/RenderStateContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,QAAA,MAAM,kBAAkB,qEAEZ,CAAC;AAEb,eAAO,MAAM,0BAA0B,sEAA8B,CAAC;AAEtE,eAAe,kBAAkB,CAAC"}

package/dist/context/RenderStateContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+const RenderStateContext = createContext(undefined);
+export const RenderStateContextProvider = RenderStateContext.Provider;
+export default RenderStateContext;
+//# sourceMappingURL=RenderStateContext.js.map

package/dist/context/RenderStateContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderStateContext.js","sourceRoot":"","sources":["../../src/context/RenderStateContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,kBAAkB,GAAG,aAAa,CAEtC,SAAS,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AAEtE,eAAe,kBAAkB,CAAC"}

package/dist/hooks/useConditionalStyled.d.ts

@@ -0,0 +1,29 @@
+import { AnyObject } from '../types';
+/**
+ * Hook that processes component props to apply conditional styling based on state conditions.
+ *
+ * This hook evaluates conditions defined in the `styled` prop and applies conditional styles
+ * based on the current render state. Style keys can include condition suffixes (e.g., "backgroundColor::conditionName")
+ * that are evaluated against the render state.
+ *
+ * @param props - Component props that may contain a `styled` object with conditional styles
+ * @returns Props with processed conditional styles applied
+ *
+ * @example
+ * ```tsx
+ * const props = {
+ *   styled: {
+ *     backgroundColor: '#fff',
+ *     'backgroundColor::isActive': '#000',
+ *   }
+ * };
+ *
+ * const processedProps = useConditionalStyled(props);
+ * // If isActive condition is true, backgroundColor will be '#000', otherwise '#fff'
+ * ```
+ *
+ * @internal
+ */
+declare const useConditionalStyled: (props: AnyObject) => AnyObject;
+export default useConditionalStyled;
+//# sourceMappingURL=useConditionalStyled.d.ts.map

package/dist/hooks/useConditionalStyled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConditionalStyled.d.ts","sourceRoot":"","sources":["../../src/hooks/useConditionalStyled.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,oBAAoB,GAAI,OAAO,SAAS,cAoC7C,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/hooks/useConditionalStyled.js

@@ -0,0 +1,57 @@
+import { useContext, useMemo } from 'react';
+import { useDataState } from '@mapples/state';
+import { keys, reduce } from 'lodash';
+import RenderStateContext from '../context/RenderStateContext';
+/**
+ * Hook that processes component props to apply conditional styling based on state conditions.
+ *
+ * This hook evaluates conditions defined in the `styled` prop and applies conditional styles
+ * based on the current render state. Style keys can include condition suffixes (e.g., "backgroundColor::conditionName")
+ * that are evaluated against the render state.
+ *
+ * @param props - Component props that may contain a `styled` object with conditional styles
+ * @returns Props with processed conditional styles applied
+ *
+ * @example
+ * ```tsx
+ * const props = {
+ *   styled: {
+ *     backgroundColor: '#fff',
+ *     'backgroundColor::isActive': '#000',
+ *   }
+ * };
+ *
+ * const processedProps = useConditionalStyled(props);
+ * // If isActive condition is true, backgroundColor will be '#000', otherwise '#fff'
+ * ```
+ *
+ * @internal
+ */
+const useConditionalStyled = (props) => {
+    const { getConditionResult } = useDataState();
+    const state = useContext(RenderStateContext);
+    const propsWithConditional = useMemo(() => {
+        const styled = props?.styled;
+        if (!styled)
+            return props;
+        const activeKeys = reduce(keys(styled), (acc, next) => {
+            const [styleKey, styleCondition] = next.split('::');
+            let conditionActive = false;
+            const condition = state?.[styleCondition];
+            if (condition) {
+                conditionActive = getConditionResult(condition?.condition);
+            }
+            return {
+                ...acc,
+                [styleKey]: [styled[styleKey], conditionActive && styled[next]],
+            };
+        }, {});
+        return {
+            ...props,
+            styled: activeKeys,
+        };
+    }, [props, state, getConditionResult]);
+    return propsWithConditional;
+};
+export default useConditionalStyled;
+//# sourceMappingURL=useConditionalStyled.js.map

package/dist/hooks/useConditionalStyled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConditionalStyled.js","sourceRoot":"","sources":["../../src/hooks/useConditionalStyled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAG/D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,oBAAoB,GAAG,CAAC,KAAgB,EAAE,EAAE;IAChD,MAAM,EAAE,kBAAkB,EAAE,GAAG,YAAY,EAAE,CAAC;IAC9C,MAAM,KAAK,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAE7C,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,MAAM,GAAc,KAAK,EAAE,MAAM,CAAC;QAExC,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAE1B,MAAM,UAAU,GAAG,MAAM,CACvB,IAAI,CAAC,MAAM,CAAC,EACZ,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACZ,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAEpD,IAAI,eAAe,GAAG,KAAK,CAAC;YAE5B,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC,cAAc,CAAC,CAAC;YAC1C,IAAI,SAAS,EAAE,CAAC;gBACd,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YAC7D,CAAC;YAED,OAAO;gBACL,GAAG,GAAG;gBACN,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,eAAe,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC;aAChE,CAAC;QACJ,CAAC,EACD,EAAE,CACH,CAAC;QAEF,OAAO;YACL,GAAG,KAAK;YACR,MAAM,EAAE,UAAU;SACnB,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEvC,OAAO,oBAAoB,CAAC;AAC9B,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/hooks/useRefProps.d.ts

@@ -0,0 +1,28 @@
+import { RefPropsMap } from '../types';
+/**
+ * Hook that resolves ref properties by looking up assets from the render context.
+ *
+ * Ref properties are strings that reference assets in the format `ref(assetType:uuid:name)`.
+ * This hook resolves these references to their actual asset values from the render context.
+ *
+ * @param refProps - Optional map of ref property names to ref strings
+ * @returns Map of resolved asset values, with undefined values filtered out
+ *
+ * @example
+ * ```tsx
+ * const refProps = {
+ *   image: 'ref(image:123:logo)',
+ *   icon: 'ref(icon:456:home)',
+ * };
+ *
+ * const resolved = useRefProps(refProps);
+ * // Returns: { image: <ImageAsset>, icon: <IconAsset> }
+ * ```
+ *
+ * @internal
+ */
+declare const useRefProps: (refProps?: RefPropsMap) => {
+    [x: string]: any;
+};
+export default useRefProps;
+//# sourceMappingURL=useRefProps.d.ts.map

package/dist/hooks/useRefProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useRefProps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,WAAW,GAAI,WAAW,WAAW;;CAQ1C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/hooks/useRefProps.js

@@ -0,0 +1,34 @@
+import { mapValues } from 'lodash';
+import useRender from './useRender';
+/**
+ * Hook that resolves ref properties by looking up assets from the render context.
+ *
+ * Ref properties are strings that reference assets in the format `ref(assetType:uuid:name)`.
+ * This hook resolves these references to their actual asset values from the render context.
+ *
+ * @param refProps - Optional map of ref property names to ref strings
+ * @returns Map of resolved asset values, with undefined values filtered out
+ *
+ * @example
+ * ```tsx
+ * const refProps = {
+ *   image: 'ref(image:123:logo)',
+ *   icon: 'ref(icon:456:home)',
+ * };
+ *
+ * const resolved = useRefProps(refProps);
+ * // Returns: { image: <ImageAsset>, icon: <IconAsset> }
+ * ```
+ *
+ * @internal
+ */
+const useRefProps = (refProps) => {
+    const { assets } = useRender();
+    return mapValues(refProps, (value) => {
+        if (!value)
+            return;
+        return assets[value];
+    });
+};
+export default useRefProps;
+//# sourceMappingURL=useRefProps.js.map

package/dist/hooks/useRefProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefProps.js","sourceRoot":"","sources":["../../src/hooks/useRefProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAInC,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,GAAG,CAAC,QAAsB,EAAE,EAAE;IAC7C,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAE/B,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/types/index.d.ts

@@ -26,6 +26,11 @@ export interface ActionProps {
  * Each entry contains configuration for component interactions.
  */
 export type ActionPropsMap = Partial<Record<string, ActionProps>>;
+/**
+ * A map of ref properties indexed by their names.
+ * Each entry has ref link in format ref(assetType:uuid:name)
+ */
+export type RefPropsMap = Partial<Record<string, string>>;
 /**
  * Represents a renderable component with all its configuration and children.
  * This is the core type used throughout the render system.
@@ -51,6 +56,25 @@ export interface RenderComponentType {
     childComponents: ChildComponents;
     dataProps?: DataProps;
     actionProps?: ActionPropsMap;
+    refProps?: RefPropsMap;
+}
+/**
+ * Represents a state condition used for conditional styling and rendering.
+ *
+ * State conditions allow components to apply different styles or behaviors
+ * based on dynamic state values. The condition string follows the format
+ * used by the state package's condition system.
+ *
+ * @interface StateCondition
+ * @property {string} name - The name identifier for this condition
+ * @property {string} condition - The condition string (e.g., "user.age::eq::18")
+ * @property {string} id - Unique identifier for this condition instance
+ * @public
+ */
+export interface StateCondition {
+    name: string;
+    condition: string;
+    id: string;
 }
 /**
  * Represents the complete render DOM structure.
@@ -59,8 +83,9 @@ export interface RenderComponentType {
  * @interface RenderDom
  * @property {RenderComponentType} root - The root component of the render tree
  */
-export interface RenderDom extends ChildComponents {
+export interface RenderDom {
     root: RenderComponentType;
+    state?: Record<string, StateCondition>;
 }
 /**
  * Props for the main Render component.
@@ -69,7 +94,7 @@ export interface RenderDom extends ChildComponents {
  * @property {RenderComponentType} root - The root component to render
  * @property {FC<RenderComponentType>} [CustomRenderComponent] - Optional custom render component to override default rendering
  */
-export type RenderProps = Pick<RenderDom, 'root'> & {
+export type RenderProps = Pick<RenderDom, 'root' | 'state'> & {
     CustomRenderComponent?: FC<RenderComponentType>;
 };
 /**
@@ -81,5 +106,6 @@ export type RenderProps = Pick<RenderDom, 'root'> & {
  */
 export interface RenderContextType {
     components: RegisteredComponents;
+    assets: AnyObject;
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEjE;;;GAGG;AAEH,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE5C;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;AAElE;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD,IAAI,EAAE,mBAAmB,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG;IAClD,qBAAqB,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC;CACjD,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,oBAAoB,CAAC;CAClC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEjE;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE5C;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;AAElE;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAE1D;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,QAAQ,CAAC,EAAE,WAAW,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;;;;;GAMG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CACxC;AAED;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAC5D,qBAAqB,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC;CACjD,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,oBAAoB,CAAC;IACjC,MAAM,EAAE,SAAS,CAAC;CACnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapples/render",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {