ehscan-react-components 0.1.52 → 0.1.54

package/README.md

@@ -11,10 +11,14 @@ This library is ideal for dashboards, admin panels, internal tools, and feature-
 - [Drag And Drop](#drag-and-drop)
 - [AddBox](#addbox)
 - [Window](#window)
-- Button
-- textarea
-- TextAreaDropDown
-- TextElementStretch
+
+- Input
+  - textarea
+  - TextAreaDropDown
+
+- Text or Content Elements
+  - TextElementStretch
+  - FoldedElement
 
 ## Installation
 
@@ -323,6 +327,10 @@ const WindowWrapper = ({ windowOpen, setWindowOpen }) => {
 ----
 # Changelog
 
+
+## [0.1.53] - 2025-12-16
+- Added FoldedElement
+
 ## [0.1.51] - 2025-12-16
 - Added TextElementStretch
 

package/dist/Components.d.ts

@@ -4,5 +4,6 @@ export { DragAndDrop } from './dnd/DragAndDrop';
 export { TextArea } from './text/TextArea';
 export { TextElementStretch } from './text/TextElementStretch';
 export { TextAreaDropDown } from './text/TextAreaDropDown';
+export { FoldedElement } from './text/FoldedElement';
 export { AddBox } from './AddBox';
 export { useChangeAddBox } from './tools/useChangeAddBox';

package/dist/Components.js

@@ -5,5 +5,6 @@ export { DragAndDrop } from './dnd/DragAndDrop';
 export { TextArea } from './text/TextArea';
 export { TextElementStretch } from './text/TextElementStretch';
 export { TextAreaDropDown } from './text/TextAreaDropDown';
+export { FoldedElement } from './text/FoldedElement';
 export { AddBox } from './AddBox';
 export { useChangeAddBox } from './tools/useChangeAddBox';

package/dist/text/FoldedElement.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+type Props = {
+    folded: boolean;
+    children: ReactNode;
+};
+export declare const FoldedElement: React.FC<Props>;
+export {};

package/dist/text/FoldedElement.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+export const FoldedElement = ({ folded, children }) => {
+    return (_jsx(AnimatePresence, { initial: false, children: !folded && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, style: { overflow: "hidden" }, children: children }, "content")) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.52",
+  "version": "0.1.54",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",
@@ -31,5 +31,8 @@
     "glob": "8",
     "minimatch": "5",
     "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "framer-motion": "^12.23.26"
   }
 }