funuicss 2.5.6 → 2.5.8

package/css/fun.css

@@ -261,6 +261,39 @@
 }
 
 
+/* For WebKit browsers (Chrome, Edge, Brave, Safari) */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--borderColor, #999); /* Darker thumb */
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dark500, #666); /* Hover effect */
+}
+
+/* Optional: Hide scrollbar buttons (arrows) */
+::-webkit-scrollbar-button {
+  display: none;
+}
+
+
+  
+*{
+  font-family: var(--font-font);
+  scroll-behavior: smooth;
+   
+}
 
 /* normalise css */
 
@@ -1983,117 +2016,7 @@ link:hover {
   color: var(--info900) !important;
 }
 
-/* Light Colors */
-.text-light,
-.hover-text-light:hover {
-  color: var(--light) !important;
-}
-
-.text-light50,
-.hover-text-light50:hover {
-  color: var(--light50) !important;
-}
-
-.text-light100,
-.hover-text-light100:hover {
-  color: var(--light100) !important;
-}
-
-.text-light200,
-.hover-text-light200:hover {
-  color: var(--light200) !important;
-}
-
-.text-light300,
-.hover-text-light300:hover {
-  color: var(--light300) !important;
-}
-
-.text-light400,
-.hover-text-light400:hover {
-  color: var(--light400) !important;
-}
 
-.text-light500,
-.hover-text-light500:hover {
-  color: var(--light500) !important;
-}
-
-.text-light600,
-.hover-text-light600:hover {
-  color: var(--light600) !important;
-}
-
-.text-light700,
-.hover-text-light700:hover {
-  color: var(--light700) !important;
-}
-
-.text-light800,
-.hover-text-light800:hover {
-  color: var(--light800) !important;
-}
-
-.text-light900,
-.hover-text-light900:hover {
-  color: var(--light900) !important;
-}
-
-/* Rose Colors */
-.text-rose,
-.hover-text-rose:hover {
-  color: var(--rose) !important;
-}
-
-.text-rose50,
-.hover-text-rose50:hover {
-  color: var(--rose50) !important;
-}
-
-.text-rose100,
-.hover-text-rose100:hover {
-  color: var(--rose100) !important;
-}
-
-.text-rose200,
-.hover-text-rose200:hover {
-  color: var(--rose200) !important;
-}
-
-.text-rose300,
-.hover-text-rose300:hover {
-  color: var(--rose300) !important;
-}
-
-.text-rose400,
-.hover-text-rose400:hover {
-  color: var(--rose400) !important;
-}
-
-.text-rose500,
-.hover-text-rose500:hover {
-  color: var(--rose500) !important;
-}
-
-.text-rose600,
-.hover-text-rose600:hover {
-  color: var(--rose600) !important;
-}
-
-.text-rose700,
-.hover-text-rose700:hover {
-  color: var(--rose700) !important;
-}
-
-.text-rose800,
-.hover-text-rose800:hover {
-  color: var(--rose800) !important;
-}
-
-.text-rose900,
-.hover-text-rose900:hover {
-  color: var(--rose900) !important;
-}
 
 /* Dark Colors */
 .text-dark,
@@ -2211,66 +2134,79 @@ body {
 .text-xl {
   font-size: var(--text-xl);
   line-height: var(--leading-xl);
+  font-weight: 400;
 }
 
 .text-2xl {
   font-size: var(--text-2xl);
   line-height: var(--leading-2xl);
+  font-weight: 500;
 }
 
 .text-3xl {
   font-size: var(--text-3xl);
   line-height: var(--leading-3xl);
+  font-weight: 500;
 }
 
 .text-4xl {
   font-size: var(--text-4xl);
   line-height: var(--leading-4xl);
+        font-weight: 600;
 }
 
 .text-5xl {
   font-size: var(--text-5xl);
   line-height: var(--leading-5xl);
+      font-weight: 600;
 }
 .text-6xl {
   font-size: var(--text-6xl);
   line-height: var(--leading-6xl);
+      font-weight: 600;
 }
 
 .text-7xl {
   font-size: var(--text-7xl);
   line-height: var(--leading-7xl);
+    font-weight: 600;
 }
 
 .text-8xl {
   font-size: var(--text-8xl);
   line-height: var(--leading-8xl);
+    font-weight: 800;
 }
 
 .text-9xl {
   font-size: var(--text-9xl);
   line-height: var(--leading-9xl);
+    font-weight: 900;
 }
 
 .text-10xl {
   font-size: var(--text-10xl);
   line-height: var(--leading-10xl);
+    font-weight: 900;
 }
 
 /* Additional responsive/animated sizes */
 .text-big {
   font-size: calc(1.375rem + 2vw);     /* Responsive scaling */
   line-height: calc(1.5rem + 2vw);
+    font-weight: 900;
 }
 
 .text-bigger {
   font-size: calc(1.375rem + 2.5vw);
   line-height: calc(1.5rem + 2.5vw);
+    font-weight: 900;
 }
 
 .text-jumbo {
   font-size: calc(1.375rem + 5vw);
   line-height: calc(1.5rem + 5.5vw);
+  font-weight: 900;
 }
 
 /* Mini sizes */
@@ -2319,35 +2255,42 @@ h1,
 h1, .h1 {
   font-size: var(--text-5xl);
   line-height: var(--leading-none);
+    font-weight: 900;
 }
 
 h2, .h2 {
   font-size: var(--text-4xl);
   line-height: var(--leading-4xl);
+  font-weight: 900;
 }
 
 h3, .h3 {
   font-size: var(--text-3xl);
   line-height: var(--leading-3xl);
+   font-weight: 700;
 }
 
 h4, .h4 {
   font-size: var(--text-2xl);
   line-height: var(--leading-2xl);
+    font-weight: 600;
 }
 
 h5, .h5 {
   font-size: var(--text-xl);
   line-height: var(--leading-xl);
+      font-weight: 500;
 }
 
 h6, .h6 {
   font-size: var(--text-base);
   line-height: var(--leading-normal);
+     font-weight: 500;
 }
 
 
 
+
 .text-bold {
   font-weight: bold !important;
 }
@@ -2762,7 +2705,7 @@ h6, .h6 {
   font-size: var(--minifiedFontSize);
   position: relative;
   overflow: hidden;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1 !important;
 }
 
@@ -3013,6 +2956,7 @@ h6, .h6 {
 /* Mobile layout when menu is open */
 .navbar-mobile-open {
   flex-direction: column;
+  height: 100vh;
 }
 
 .navbar-mobile-open .linkWrapper {
@@ -3075,6 +3019,128 @@ h6, .h6 {
 
 .navigation-bar.transparent{  backdrop-filter: none !important ;}
 
+.navhamburger {
+  width: 32px;
+  height: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  cursor: pointer;
+  position: relative;
+}
+
+.navline {
+  height: 3px;
+  background-color: var(--text-color);
+  border-radius: 4rem !important;
+  width: 100%;
+
+}
+
+/* Middle line shorter and centered */
+.navmiddle {
+  width: 60%;
+  align-self: flex-start;
+  background-color: var(--primary500);
+
+}
+
+.navbottom{
+  width: 90%;
+  align-self: flex-start;
+}
+
+/* Animate open state */
+.navopen .navtop {
+  animation: topLineOpen 0.5s forwards;
+}
+
+.navopen .navmiddle {
+  animation: middleLineOpen 0.5s forwards;
+}
+
+.navopen .navbottom {
+  animation: bottomLineOpen 0.5s forwards;
+}
+
+/* Animate close state (optional for toggle) */
+.navhamburger:not(.navopen) .navtop {
+  animation: topLineClose 0.5s forwards;
+}
+
+.navhamburger:not(.navopen) .navmiddle {
+  animation: middleLineClose 0.5s forwards;
+}
+
+.navhamburger:not(.navopen) .navbottom {
+  animation: bottomLineClose 0.5s forwards;
+}
+
+/* KEYFRAMES */
+
+@keyframes topLineOpen {
+  0% {
+    transform: translateY(0) rotate(0deg);
+  }
+  100% {
+    transform: translateY(10px) rotate(45deg);
+    background-color: var(--error);
+    width: 100% !important;
+
+  }
+}
+
+@keyframes middleLineOpen {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes bottomLineOpen {
+  0% {
+    transform: translateY(0) rotate(0deg);
+  }
+  100% {
+    transform: translateY(-10px) rotate(-45deg);
+    background-color: var(--error);
+    width: 100% !important;
+
+  }
+}
+
+/* Reverse animations (optional) */
+@keyframes topLineClose {
+  0% {
+    transform: translateY(10px) rotate(45deg);
+  }
+  100% {
+    transform: translateY(0) rotate(0deg);
+
+  }
+}
+
+@keyframes middleLineClose {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+
+  }
+}
+
+@keyframes bottomLineClose {
+  0% {
+    transform: translateY(-10px) rotate(-45deg);
+  }
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+}
+
 .fun_side_bar_wrapper{
   position: fixed;
   z-index: var(--sideBarZindex);
@@ -3288,26 +3354,14 @@ h6, .h6 {
   position: relative;
   width:fit-content;
   z-index: 1;
-  padding: 5px;
-}
-.dropdown .drop-menu {
-  top: 101%;
-}
-.dropdown.left  .drop-menu{
-  left: 0rem;
-}
-.dropdown.right .drop-menu{
-  right: 0rem;
-}
-.dropup.left  .drop-menu{
-  left: 0rem;
-}
-.dropup.right .drop-menu{
-  right: 0rem;
-}
-.dropup .drop-menu {
-  bottom: 101%;
 }
+.dropdown .drop-menu { top: 101%; }
+.dropup .drop-menu { bottom: 101%; }
+.dropdown.left .drop-menu { left: 0; }
+.dropdown.right .drop-menu { right: 0; }
+.dropup.left .drop-menu { left: 0; }
+.dropup.right .drop-menu { right: 0; }
+
 .drop-menu {
   position: absolute;
   box-shadow: var(--card);
@@ -3534,8 +3588,11 @@ padding-right: 2.5rem;
   
 }
 
-
-
+@media screen and (max-width: 800px){
+  .input , input, textarea{
+    font-size: 16px !important;
+  }
+}
 
 /*flex*/
 .flex {

package/index.d.ts

@@ -21,6 +21,7 @@ export { default as NotFound } from "./ui/page/NotFound";
 export { default as UnAuthorized } from "./ui/page/UnAuthorized";
 export { default as DropUp } from "./ui/drop/Up";
 export { default as DropDown } from "./ui/drop/Down";
+export { default as Dropdown } from "./ui/drop/Dropdown";
 export { default as DropItem } from "./ui/drop/Item";
 export { default as DropMenu } from "./ui/drop/Menu";
 export { default as ProgressBar } from "./ui/progress/Bar";

package/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullCenteredPage = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
+exports.FullCenteredPage = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
 var Alert_1 = require("./ui/alert/Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 var theme_1 = require("./ui/theme/theme");
@@ -50,6 +50,8 @@ var Up_1 = require("./ui/drop/Up");
 Object.defineProperty(exports, "DropUp", { enumerable: true, get: function () { return __importDefault(Up_1).default; } });
 var Down_1 = require("./ui/drop/Down");
 Object.defineProperty(exports, "DropDown", { enumerable: true, get: function () { return __importDefault(Down_1).default; } });
+var Dropdown_1 = require("./ui/drop/Dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(Dropdown_1).default; } });
 var Item_1 = require("./ui/drop/Item");
 Object.defineProperty(exports, "DropItem", { enumerable: true, get: function () { return __importDefault(Item_1).default; } });
 var Menu_1 = require("./ui/drop/Menu");

package/index.tsx

@@ -21,6 +21,7 @@ export { default as NotFound } from "./ui/page/NotFound"
 export { default as UnAuthorized } from "./ui/page/UnAuthorized"
 export { default as DropUp } from "./ui/drop/Up"
 export { default as DropDown } from "./ui/drop/Down"
+export { default as Dropdown } from "./ui/drop/Dropdown"
 export { default as DropItem } from "./ui/drop/Item"
 export { default as DropMenu } from "./ui/drop/Menu"
 export { default as ProgressBar } from "./ui/progress/Bar"

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.6",
+  "version": "2.5.8",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",
@@ -37,7 +37,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
     "prepublishOnly": "tsc",
-    "publish": "npm publish && git add . && git commit -m 'update' && git push origin main"
+    "publish": "npm publish",
+    "git": "git add . && git commit -m 'update' && git push origin main"
   },
   "author": "FunInc",
   "license": "MIT",
@@ -46,7 +47,8 @@
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.11",
-    "@types/react": "^19.1.4",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.6",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.8.1",
     "react": "^18.2.0",

package/tsconfig.json

@@ -1,10 +1,19 @@
 {
   "compilerOptions": {
-    "jsx": "react",
-    "target": "es5",  
-    "module": "commonjs",
-    "composite": true  ,
-    "esModuleInterop": true ,
-    "declaration":true
-  } 
-}
+    "target": "ES6",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}