lilact 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A Little JSX/React Runtime Implementation for Browser",
   "repository": "github:arashkazemi/lilact",
   "homepage": "https://arashkazemi.github.io/lilact/",
@@ -32,7 +32,6 @@
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",
-    "@reduxjs/toolkit": "^2.12.0",
     "prop-types": "^15.8.1",
     "redux": "^5.0.1"
   }

package/root/demos/pane.jsx

@@ -0,0 +1,31 @@
+const { useRef, useState, ResizablePane } = Lilact;
+
+module.exports = function Demo() {
+  const ref = useRef(null);
+  const [mode, setMode] = useState("horizontal");
+  const [position, setPosition] = useState(0.35);
+
+  return (
+    <>
+      <button onClick={() => ref.current?.setMode(ref.current?.getMode() === "horizontal" ? "vertical" : "horizontal")}>
+        Toggle mode
+      </button>
+      <button onClick={() => ref.current?.setPosition(0.5)}>Center</button>
+
+      <div  style={{ height: "calc(100% - 2em)", width: "100% - 2em", border: "1px solid" }}>
+        <ResizablePane
+          ref={ref}
+          mode={mode}
+          position={position}
+          min={0.2}
+          max={0.8}
+          splitterSize={10}
+          onSizeChange={(p) => setPosition(p)}
+        >
+          <div style={{ padding: 12 }}>Left/Top</div>
+          <div style={{ padding: 12 }}>Right/Bottom</div>
+        </ResizablePane>
+      </div>
+    </>
+  );
+}

package/root/demos/usetransition.jsx

@@ -22,7 +22,7 @@ const Demo = ()=>{
 								await new Promise( (res,rej)=>{setTimeout(res, 1000)} ); 
 							});
 						} )
-					}, [] );
+					} );
 	return (
 		<div className={css({background:bg})}>
 			<h4>{id}</h4>

package/root/index.html

@@ -160,6 +160,7 @@ function App()
 {
 	const demos =[	
 		['stopwatch.jsx',				'( useState, useRef )'],
+		['pane.jsx',						'( useRef, useState, ResizablePane )'],
 		['modal.jsx',						'( useEffect, useRef, useState )'],
 		['actionstate.jsx',			'( useActionState, useState )'],
 		['context.jsx',					'( createContext, useContext, useState ), emotion:( css, cx )'],