ehscan-react-components 0.1.51 → 0.1.53

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/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/dist/text/TextArea.d.ts

@@ -1,4 +1,4 @@
-import './style/input.css';
+import '../style/input.css';
 interface Props {
     id?: string;
     tabIndex?: number;

package/dist/text/TextArea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState, useCallback, useId } from "react";
-import './style/input.css';
+import '../style/input.css';
 export const TextArea = ({ id, tabIndex, label, value, editable = true, required = false, onChange, placeholder, maxLength = 500, addClass }) => {
     const textareaRef = useRef(null);
     const [charCount, setCharCount] = useState(value.length);

package/dist/text/TextAreaDropDown.d.ts

@@ -1,4 +1,4 @@
-import './style/input-dropdown.css';
+import '../style/input-dropdown.css';
 type Action = "add" | "remove";
 interface Props {
     id?: string;

package/dist/text/TextAreaDropDown.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useId, useEffect } from "react";
 import { DropDown } from "../DropDown";
-import './style/input-dropdown.css';
+import '../style/input-dropdown.css';
 export const TextAreaDropDown = ({ id, tabIndex, alwaysOpenDropDown, closeCommand, label, value, editable = true, required = false, dropdownValue, onChange, placeholder = 'select or create new entry', maxLength = 500, addClass, maxDropDownHeight = 200 }) => {
     const childRef = useRef(null);
     const textareaRef = useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "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"
   }
 }