funda-ui 1.0.313 → 1.0.317

package/README.md

@@ -6,6 +6,7 @@ React components using pure Bootstrap 5+ which does not contain any external sty
 ---
 
 
+
 ## Key Features
 
 1. Simplify the assignment method of diversified data.
@@ -14,11 +15,13 @@ React components using pure Bootstrap 5+ which does not contain any external sty
 4. Introduce appropriate component `.css` files as needed, only for some components with special needs. Most of them can directly use Bootstrap's official style sheet.
 
 
+
 ## Components List
 
 Here is a table of the components and their status.
 
 
+
 | WEB ELEMENTS | FORMS | INTERACTION | NAVIGATION |
 | --- | --- | --- | --- |
 | [Accordion ❏](packages/Accordion/README.md) | [Input ✅](packages/Input/README.md) | [Infinite Scroll ❏](packages/InfiniteScroll/README.md) |[Multilevel Dropdown Menu ✅](packages/MultilevelDropdownMenu/README.md)  | 
@@ -50,6 +53,9 @@ Here is a table of the components and their status.
 
 
 
+
+
+
 ## Usage
 
 First, you need to install it:
@@ -94,76 +100,6 @@ import 'funda-ui/CascadingSelect/index.css';
 ```
 
 
-## Getting Started
-
-Make sure if Node 14+ is installed on your computer.
-
-### Step 1: Create a new Lerna workspace by running:
-
-```sh
-$ cd /{your_directory}/funda-ui
-$ npx lerna init
-```
-
-
-### Step 2: Install dependencies (Required)
-
-It will automatically install the dependencies of all resources in `packages/` without duplication.
-
-```sh
-$ npm install
-```
- 
-
-### Step 3: To open the visualization, run:
-
-```sh
-$ npx nx graph
-```
- 
-### Step 4: To build all projects, run
-
-```sh
-$ npx lerna run build
-```
-
-or Build the package you want (recommend):
-
-```sh
-$ npx lerna run build --scope=plugin-1 --scope=plugin-2
-```
-
-Please do not install **lerna** globally to use `lerna run build`
-
-
-### Step 5: (optional) Use a custom script like:
-
-```sh
-$ npx lerna exec npm run export --scope=plugin-2
-```
-  
-
-## Publish the lib of components, it will hang on NPM: 
-
-
-```sh
-$ npm run build:lib
-$ npm run build:publish
-```
-  
-> **(Optional) Manually generate `.d.ts` files, you can execute**
-> 
-> ```sh
-> $ npx -p typescript tsc lib/cjs/*.js --declaration --allowJs --emitDeclarationOnly
-> ```
-> 
-
-
-## Contributing
-
-- [Lerna](https://github.com/lerna/lerna)
-- [Bootstrap](https://getbootstrap.com/)
-- [React](https://react.dev/)
 
 
 ## Licensing

package/{publish/Scrollbar → Scrollbar}/index.d.ts

@@ -5,6 +5,7 @@ declare type ScrollbarProps = {
     arrowIcons?: React.ReactNode[];
     disableArrow?: boolean;
     horizontallyWithWheel?: boolean;
+    autoScrollTo?: boolean | string;
     /** Incoming data, changes in the `data` value will cause the component to re-render. */
     data?: any;
     onMove?: (data: any) => void;

package/{publish/Scrollbar → Scrollbar}/index.js

@@ -165,6 +165,7 @@ var Scrollbar = function Scrollbar(props) {
     arrowIcons = props.arrowIcons,
     disableArrow = props.disableArrow,
     horizontallyWithWheel = props.horizontallyWithWheel,
+    autoScrollTo = props.autoScrollTo,
     data = props.data,
     onMove = props.onMove,
     id = props.id,
@@ -173,6 +174,7 @@ var Scrollbar = function Scrollbar(props) {
   var idRes = id || uniqueID;
   var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var contentRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var AUTO_SCROLL_TO_DIR = typeof autoScrollTo === 'undefined' ? false : autoScrollTo;
   var icons = typeof arrowIcons === 'undefined' || !arrowIcons ? [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
     width: "10px",
     height: "10px",
@@ -276,15 +278,22 @@ var Scrollbar = function Scrollbar(props) {
 
   function contentScrollTo(dir) {
     var smooth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var current = contentRef.current;
     if (current) {
-      var scrollAmount = dir === 'down' ? 200 : -200;
+      var pivot = current.scrollHeight / 10;
+      var speed = pivot >= 200 ? 200 : pivot;
+      speed = !max ? speed : current.scrollHeight;
+      var scrollAmount = dir === 'down' ? speed : -speed;
       current.scrollBy({
         top: scrollAmount,
         behavior: smooth ? 'smooth' : 'auto'
       });
     }
   }
+  function contentScrollToMax(dir) {
+    contentScrollTo(dir, true, true);
+  }
   function handleResize(ref, trackSize) {
     var clientHeight = ref.clientHeight,
       scrollHeight = ref.scrollHeight;
@@ -366,10 +375,12 @@ var Scrollbar = function Scrollbar(props) {
 
   function horizontalContentScrollTo(dir) {
     var smooth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var current = contentRef.current;
     if (current) {
-      var pivot = current.clientWidth / 10;
+      var pivot = current.scrollWidth / 10;
       var speed = pivot >= 200 ? 200 : pivot;
+      speed = !max ? speed : current.scrollWidth;
       var scrollAmount = dir === 'right' ? speed : -speed;
       current.scrollBy({
         left: scrollAmount,
@@ -377,6 +388,9 @@ var Scrollbar = function Scrollbar(props) {
       });
     }
   }
+  function horizontalContentScrollToMax(dir) {
+    horizontalContentScrollTo(dir, true, true);
+  }
   function handleHorizontalResize(ref, trackSize) {
     var clientWidth = ref.clientWidth,
       scrollWidth = ref.scrollWidth;
@@ -455,6 +469,7 @@ var Scrollbar = function Scrollbar(props) {
 
   // If the content and the scrollbar track exist, use a ResizeObserver to adjust height of thumb and listen for scroll event to move the thumb
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    //
     if (contentRef.current && scrollTrackRef.current && scrollTrackHorizontalRef.current) {
       // Vertical
       var ref = contentRef.current;
@@ -473,6 +488,16 @@ var Scrollbar = function Scrollbar(props) {
       });
       horizontalObserver.current.observe(horizontalRef);
       horizontalRef.addEventListener('scroll', handleHorizontalThumbPosition);
+
+      // auto scroll to some position
+      setTimeout(function () {
+        if (AUTO_SCROLL_TO_DIR !== false && (AUTO_SCROLL_TO_DIR == 'down' || AUTO_SCROLL_TO_DIR == 'up')) {
+          contentScrollToMax(AUTO_SCROLL_TO_DIR);
+        }
+        if (AUTO_SCROLL_TO_DIR !== false && (AUTO_SCROLL_TO_DIR == 'left' || AUTO_SCROLL_TO_DIR == 'right')) {
+          horizontalContentScrollToMax(AUTO_SCROLL_TO_DIR);
+        }
+      }, 50);
       return function () {
         var _observer$current, _horizontalObserver$c;
         (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.unobserve(ref);

package/lib/cjs/Scrollbar/index.d.ts

@@ -5,6 +5,7 @@ declare type ScrollbarProps = {
     arrowIcons?: React.ReactNode[];
     disableArrow?: boolean;
     horizontallyWithWheel?: boolean;
+    autoScrollTo?: boolean | string;
     /** Incoming data, changes in the `data` value will cause the component to re-render. */
     data?: any;
     onMove?: (data: any) => void;

package/lib/cjs/Scrollbar/index.js

@@ -165,6 +165,7 @@ var Scrollbar = function Scrollbar(props) {
     arrowIcons = props.arrowIcons,
     disableArrow = props.disableArrow,
     horizontallyWithWheel = props.horizontallyWithWheel,
+    autoScrollTo = props.autoScrollTo,
     data = props.data,
     onMove = props.onMove,
     id = props.id,
@@ -173,6 +174,7 @@ var Scrollbar = function Scrollbar(props) {
   var idRes = id || uniqueID;
   var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var contentRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var AUTO_SCROLL_TO_DIR = typeof autoScrollTo === 'undefined' ? false : autoScrollTo;
   var icons = typeof arrowIcons === 'undefined' || !arrowIcons ? [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
     width: "10px",
     height: "10px",
@@ -276,15 +278,22 @@ var Scrollbar = function Scrollbar(props) {
 
   function contentScrollTo(dir) {
     var smooth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var current = contentRef.current;
     if (current) {
-      var scrollAmount = dir === 'down' ? 200 : -200;
+      var pivot = current.scrollHeight / 10;
+      var speed = pivot >= 200 ? 200 : pivot;
+      speed = !max ? speed : current.scrollHeight;
+      var scrollAmount = dir === 'down' ? speed : -speed;
       current.scrollBy({
         top: scrollAmount,
         behavior: smooth ? 'smooth' : 'auto'
       });
     }
   }
+  function contentScrollToMax(dir) {
+    contentScrollTo(dir, true, true);
+  }
   function handleResize(ref, trackSize) {
     var clientHeight = ref.clientHeight,
       scrollHeight = ref.scrollHeight;
@@ -366,10 +375,12 @@ var Scrollbar = function Scrollbar(props) {
 
   function horizontalContentScrollTo(dir) {
     var smooth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var current = contentRef.current;
     if (current) {
-      var pivot = current.clientWidth / 10;
+      var pivot = current.scrollWidth / 10;
       var speed = pivot >= 200 ? 200 : pivot;
+      speed = !max ? speed : current.scrollWidth;
       var scrollAmount = dir === 'right' ? speed : -speed;
       current.scrollBy({
         left: scrollAmount,
@@ -377,6 +388,9 @@ var Scrollbar = function Scrollbar(props) {
       });
     }
   }
+  function horizontalContentScrollToMax(dir) {
+    horizontalContentScrollTo(dir, true, true);
+  }
   function handleHorizontalResize(ref, trackSize) {
     var clientWidth = ref.clientWidth,
       scrollWidth = ref.scrollWidth;
@@ -455,6 +469,7 @@ var Scrollbar = function Scrollbar(props) {
 
   // If the content and the scrollbar track exist, use a ResizeObserver to adjust height of thumb and listen for scroll event to move the thumb
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    //
     if (contentRef.current && scrollTrackRef.current && scrollTrackHorizontalRef.current) {
       // Vertical
       var ref = contentRef.current;
@@ -473,6 +488,16 @@ var Scrollbar = function Scrollbar(props) {
       });
       horizontalObserver.current.observe(horizontalRef);
       horizontalRef.addEventListener('scroll', handleHorizontalThumbPosition);
+
+      // auto scroll to some position
+      setTimeout(function () {
+        if (AUTO_SCROLL_TO_DIR !== false && (AUTO_SCROLL_TO_DIR == 'down' || AUTO_SCROLL_TO_DIR == 'up')) {
+          contentScrollToMax(AUTO_SCROLL_TO_DIR);
+        }
+        if (AUTO_SCROLL_TO_DIR !== false && (AUTO_SCROLL_TO_DIR == 'left' || AUTO_SCROLL_TO_DIR == 'right')) {
+          horizontalContentScrollToMax(AUTO_SCROLL_TO_DIR);
+        }
+      }, 50);
       return function () {
         var _observer$current, _horizontalObserver$c;
         (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.unobserve(ref);

package/lib/esm/Scrollbar/index.tsx

@@ -8,6 +8,7 @@ type ScrollbarProps = {
     arrowIcons?: React.ReactNode[];
     disableArrow?: boolean;
     horizontallyWithWheel?: boolean;
+    autoScrollTo?: boolean | string;
     /** Incoming data, changes in the `data` value will cause the component to re-render. */
     data?: any;
     onMove?: (data: any) => void;
@@ -25,6 +26,7 @@ const Scrollbar = (props: ScrollbarProps) => {
         arrowIcons,
         disableArrow,
         horizontallyWithWheel,
+        autoScrollTo,
         data,
         onMove,
         id,
@@ -36,6 +38,7 @@ const Scrollbar = (props: ScrollbarProps) => {
     const idRes = id || uniqueID;
     const rootRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
+    const AUTO_SCROLL_TO_DIR = typeof autoScrollTo === 'undefined' ? false : autoScrollTo;
     const icons = typeof arrowIcons === 'undefined' || !arrowIcons ? [
         <><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none"> <path d="M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z"/> </svg></>,
         <><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none"> <path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" /> </svg></>,
@@ -95,15 +98,22 @@ const Scrollbar = (props: ScrollbarProps) => {
     // Vertical --> functions
     //========================================
 
-    function contentScrollTo(dir: string, smooth: boolean = true) {
+    function contentScrollTo(dir: string, smooth: boolean = true, max: boolean = false) {
         const { current } = contentRef;
         if (current) {
-            const scrollAmount = dir === 'down' ? 200 : -200;
+            const pivot = current.scrollHeight/10;
+            let speed = pivot >= 200 ? 200 : pivot;
+            speed = !max ? speed : current.scrollHeight;
+            const scrollAmount = dir === 'down' ? speed : -speed;
             current.scrollBy({ top: scrollAmount, behavior: smooth ? 'smooth' : 'auto' });
         }
     }
 
 
+    function contentScrollToMax(dir: string) {
+        contentScrollTo(dir, true, true);
+    }
+
 
     function handleResize(ref: HTMLDivElement, trackSize: number) {
         const { clientHeight, scrollHeight } = ref;
@@ -212,16 +222,22 @@ const Scrollbar = (props: ScrollbarProps) => {
     // Horizontal  --> functions
     //========================================    
 
-    function horizontalContentScrollTo(dir: string, smooth: boolean = true) {
+    function horizontalContentScrollTo(dir: string, smooth: boolean = true, max: boolean = false) {
         const { current } = contentRef;
         if (current) {
-            const pivot = current.clientWidth/10;
-            const speed = pivot >= 200 ? 200 : pivot;
+            const pivot = current.scrollWidth/10;
+            let speed = pivot >= 200 ? 200 : pivot;
+            speed = !max ? speed : current.scrollWidth;
             const scrollAmount = dir === 'right' ? speed : -speed;
             current.scrollBy({ left: scrollAmount, behavior: smooth ? 'smooth' : 'auto' });
         }
     }
 
+    function horizontalContentScrollToMax(dir: string) {
+        horizontalContentScrollTo(dir, true, true);
+    }
+
+
     
     function handleHorizontalResize(ref: HTMLDivElement, trackSize: number) {
         const { clientWidth, scrollWidth } = ref;
@@ -332,7 +348,8 @@ const Scrollbar = (props: ScrollbarProps) => {
     // If the content and the scrollbar track exist, use a ResizeObserver to adjust height of thumb and listen for scroll event to move the thumb
     useEffect(() => {
 
-        
+
+        //
         if (contentRef.current && scrollTrackRef.current && scrollTrackHorizontalRef.current) {
 
             // Vertical
@@ -355,6 +372,25 @@ const Scrollbar = (props: ScrollbarProps) => {
             horizontalRef.addEventListener('scroll', handleHorizontalThumbPosition);
 
 
+            // auto scroll to some position
+            setTimeout(() => {
+                if (
+                    AUTO_SCROLL_TO_DIR !== false && 
+                    (AUTO_SCROLL_TO_DIR == 'down' || AUTO_SCROLL_TO_DIR == 'up')
+                ) {
+                    contentScrollToMax(AUTO_SCROLL_TO_DIR);
+                }
+                if (
+                    AUTO_SCROLL_TO_DIR !== false && 
+                    (AUTO_SCROLL_TO_DIR == 'left' || AUTO_SCROLL_TO_DIR == 'right')
+                ) {
+                    horizontalContentScrollToMax(AUTO_SCROLL_TO_DIR);
+                }
+                
+            }, 50);
+                
+
+
             return () => {
                 observer.current?.unobserve(ref);
                 ref.removeEventListener('scroll', handleThumbPosition);

package/package.json

@@ -1,42 +1,45 @@
 {
-    "author": "UIUX Lab",
-    "email": "uiuxlab@gmail.com",
-    "name": "funda-ui",
-    "version": "1.0.313",
-    "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/xizon/funda-ui.git"
-    },
-    "scripts": {
-        "build:lib": "node scripts/build-lib.js",
-        "build:publish": "node scripts/build-publish.js"
-    },
-    "keywords": [
-        "bootstrap",
-        "react-bootstrap",
-        "react-components",
-        "components",
-        "components-react",
-        "react-bootstrap-components",
-        "react",
-        "funda-ui",
-        "fundaui",
-        "uikit",
-        "ui-kit",
-        "ui-components"
-    ],
-    "workspaces": [
-        "packages/*"
-    ],
-    "devDependencies": {
-        "lerna": "^6.5.1",
-        "nx": "15.7.2"
-    },
-    "bugs": {
-        "url": "https://github.com/xizon/funda-ui/issues"
-    },
-    "homepage": "https://github.com/xizon/funda-ui#readme",
-    "main": "none",
-    "license": "MIT"
-}
+  "author": "UIUX Lab",
+  "email": "uiuxlab@gmail.com",
+  "name": "funda-ui",
+  "version": "1.0.317",
+  "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xizon/funda-ui.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "bootstrap",
+    "react-bootstrap",
+    "react-components",
+    "components",
+    "components-react",
+    "react-bootstrap-components",
+    "react",
+    "funda-ui",
+    "fundaui",
+    "uikit",
+    "ui-kit",
+    "ui-components"
+  ],
+  "bugs": {
+    "url": "https://github.com/xizon/funda-ui/issues"
+  },
+  "homepage": "https://github.com/xizon/funda-ui#readme",
+  "main": "all.js",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "types": "all.d.ts",
+  "publishConfig": {
+    "directory": "lib"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/README_PUBLISH.md

@@ -1,108 +0,0 @@
-# Funda UI
-
-React components using pure Bootstrap 5+ which does not contain any external style and script libraries. You can load Bootstrap css libraries separately in your project.
-
-
----
-
-
-
-## Key Features
-
-1. Simplify the assignment method of diversified data.
-2. Components are compatible with `gRPC`, `REST APIs`, `GraphQL` self-packaging, uniformly use [Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) and their methods to introduce interfaces
-3. Enhanced user interaction, flexible use in asynchronous and synchronous states
-4. Introduce appropriate component `.css` files as needed, only for some components with special needs. Most of them can directly use Bootstrap's official style sheet.
-
-
-
-## Components List
-
-Here is a table of the components and their status.
-
-
-
-| WEB ELEMENTS | FORMS | INTERACTION | NAVIGATION |
-| --- | --- | --- | --- |
-| [Accordion ❏](packages/Accordion/README.md) | [Input ✅](packages/Input/README.md) | [Infinite Scroll ❏](packages/InfiniteScroll/README.md) |[Multilevel Dropdown Menu ✅](packages/MultilevelDropdownMenu/README.md)  | 
-| [Accordion Slider ❏](packages/AccordionSlider/README.md) | [Password Input ❏](packages/PasswordInput/README.md) | [Image Perspective Hover ❏](packages/ImagePerspectiveHover/README.md) | [Dropdown Menu ✅](packages/DropdownMenu/README.md)  | 
-| [Back To Top ✅](packages/BackToTop/README.md) | [Merge Input ❏](packages/MergeInput/README.md) | [Mousewheel Interaction ❏](packages/MousewheelInteraction/README.md) | | 
-| [Button ❏](packages/Button/README.md) | [Tag Input ✅](packages/TagInput/README.md) | [Parallax ❏](packages/Parallax/README.md) |  | 
-| [Card ❏](packages/Card/README.md) | [Textarea  ✅](packages/Textarea/README.md) | [Scroll Reveal ✅](packages/ScrollReveal/README.md) |  | 
-| [Content Placeholder ❏](packages/ContentPlaceholder/README.md) | [Select ✅](packages/Select/README.md) | [Sticky Elements ❏](packages/StickyElements/README.md) |  |
-| [Counter ❏](packages/Counter/README.md) | [Cascading Select ✅](packages/CascadingSelect/README.md) | [Mode Switch ✅](packages/ModeSwitch/README.md) |  |
-| [Hybrid Content Slider ❏](packages/HybridContentSlider/README.md) | [Cascading Select End-to-end ✅🔥](packages/CascadingSelectE2E/README.md) | [Custom Scrollbar ✅](packages/Scrollbar/README.md) |  |
-| [Image Shapes ❏](packages/ImageShapes/README.md) | [Radio ✅](packages/Radio/README.md) |  |  |
-| [Lightbox ❏](packages/Lightbox/README.md) | [Checkbox ✅](packages/Checkbox/README.md) |  |  |
-| [List Bulleted ❏](packages/ListBulleted/README.md) | [Multifunction Select ✅🔥](packages/MultiFuncSelect/README.md) |  |  |
-| [Modal Dialog ✅🔥](packages/ModalDialog/README.md) | [LiveSearch ✅](packages/LiveSearch/README.md) |  |  |
-| [Pagination ✅](packages/Pagination/README.md) | [Number ❏](packages/Number/README.md) |  |  |
-| [Table ✅](packages/Table/README.md) | [SearchBar ✅](packages/SearchBar/README.md) |  |  |
-| [Periodical Scroll ❏](packages/PeriodicalScroll/README.md) | [Switch ✅](packages/Switch/README.md) |  |  |
-| [Progress Bar ❏](packages/ProgressBar/README.md) | [Dynamic Fields ✅🔥](packages/DynamicFields/README.md) |  |  |
-| [Rating ❏](packages/Rating/README.md) | [File ✅](packages/File/README.md) |  |  |
-| [Seamless Scrolling Element ❏](packages/SeamlessScrollingElement/README.md) | [File Field ❏](packages/FileField/README.md) |  |  |
-| [Show More Less ✅](packages/ShowMoreLess/README.md) | [Range Slider ✅](packages/RangeSlider/README.md) | |  |
-| [Slideshow ❏](packages/Slideshow/README.md) | [Color Picker ✅](packages/ColorPicker/README.md) |  |  |
-| [Tabs ✅](packages/Tabs/README.md) |  |  |  |
-| [Timeline ❏](packages/Timeline/README.md) |  |  |  |
-| [Toast ✅](packages/Toast/README.md) |  |  |  |
-| [Tooltip ✅](packages/Tooltip/README.md) |  |  |  |
-| [Digital Clock ✅](packages/DigitalClock/README.md) |  |  |  |
-| [Tree ✅🔥](packages/Tree/README.md) |  |  |  |
-
-
-
-
-
-
-## Usage
-
-First, you need to install it:
-
-```sh
-$ npm i funda-ui
-```
-
-Next, import required components as required
-
-```js
-import Input from 'funda-ui/Input';
-import Textarea from 'funda-ui/Textarea';
-import CascadingSelect from 'funda-ui/CascadingSelect';
-
-// component styles
-import 'funda-ui/CascadingSelect/index.css';
-```
-
-or 
-
-```js
-import { 
-    Input,
-    Textarea,
-    CascadingSelect
-} from 'funda-ui';
-
-// component styles
-import 'funda-ui/CascadingSelect/index.css';
-```
-
-or
-
-```js
-const Input = require('funda-ui').Input;
-const Textarea = require('funda-ui').Textarea;
-const CascadingSelect = require('funda-ui').CascadingSelect;
-
-// component styles
-import 'funda-ui/CascadingSelect/index.css';
-```
-
-
-
-
-## Licensing
-
-Licensed under the [MIT](https://opensource.org/licenses/MIT).
-