funuicss 2.5.0 → 2.5.2

package/css/fun.css

@@ -90,6 +90,21 @@
     --secondary700: #be185d;
     --secondary800: #9d174d;
     --secondary900: #831843;
+
+    /* Accent Colors */
+--accent50:  #ffc300;
+--accent50:  #fff9e6;
+--accent100: #fff3cc;
+--accent200: #ffe999;
+--accent300: #ffdf66;
+--accent400: #ffd633;
+--accent500: #ffc300; /* Base */
+--accent600: #e6af00;
+--accent700: #cc9c00;
+--accent800: #b38800;
+--accent900: #8f6e00;
+
+
 /* Error Colors */
 --error: #ef4444;
 --error50: #fef2f2;
@@ -227,7 +242,7 @@
   --bd-line-height: normal;
   --smallFont: .79rem ;
   --smallerFont: .7rem;
-  --navHeight: 45px ;
+  --navHeight: fit-content ;
   --borderColor:#ddd;
   --border: 0.1rem solid var(--borderColor);
   --inputBorder:0.12rem;
@@ -559,6 +574,72 @@ link:hover {
   color: var(--white);
 }
 
+.accent,
+.hover-accent:hover {
+  background-color: var(--accent) !important;
+  color: var(--white);
+}
+
+.accent50,
+.hover-accent50:hover {
+  background-color: var(--accent50) !important;
+  color: var(--black);
+}
+
+.accent100,
+.hover-accent100:hover {
+  background-color: var(--accent100) !important;
+  color: var(--accent900);
+}
+
+.accent200,
+.hover-accent200:hover {
+  background-color: var(--accent200) !important;
+  color: var(--accent800);
+}
+
+.accent300,
+.hover-accent300:hover {
+  background-color: var(--accent300) !important;
+  color: var(--accent700);
+}
+
+.accent400,
+.hover-accent400:hover {
+  background-color: var(--accent400) !important;
+  color: var(--white);
+}
+
+.accent500,
+.hover-accent500:hover {
+  background-color: var(--accent500) !important;
+  color: var(--white);
+}
+
+.accent600,
+.hover-accent600:hover {
+  background-color: var(--accent600) !important;
+  color: var(--white);
+}
+
+.accent700,
+.hover-accent700:hover {
+  background-color: var(--accent700) !important;
+  color: var(--white);
+}
+
+.accent800,
+.hover-accent800:hover {
+  background-color: var(--accent800) !important;
+  color: var(--white);
+}
+
+.accent900,
+.hover-accent900:hover {
+  background-color: var(--accent900) !important;
+  color: var(--white);
+}
+
 /* Error Color */
 .error,
 .hover-error:hover {
@@ -1257,6 +1338,61 @@ link:hover {
   color: var(--secondary900) !important;
 }
 
+.text-accent,
+.hover-text-accent:hover {
+  color: var(--accent) !important;
+}
+
+.text-accent50,
+.hover-text-accent50:hover {
+  color: var(--accent50) !important;
+}
+
+.text-accent100,
+.hover-text-accent100:hover {
+  color: var(--accent100) !important;
+}
+
+.text-accent200,
+.hover-text-accent200:hover {
+  color: var(--accent200) !important;
+}
+
+.text-accent300,
+.hover-text-accent300:hover {
+  color: var(--accent300) !important;
+}
+
+.text-accent400,
+.hover-text-accent400:hover {
+  color: var(--accent400) !important;
+}
+
+.text-accent500,
+.hover-text-accent500:hover {
+  color: var(--accent500) !important;
+}
+
+.text-accent600,
+.hover-text-accent600:hover {
+  color: var(--accent600) !important;
+}
+
+.text-accent700,
+.hover-text-accent700:hover {
+  color: var(--accent700) !important;
+}
+
+.text-accent800,
+.hover-text-accent800:hover {
+  color: var(--accent800) !important;
+}
+
+.text-accent900,
+.hover-text-accent900:hover {
+  color: var(--accent900) !important;
+}
+
 /* Error Colors */
 .text-error,
 .hover-text-error:hover {
@@ -2533,27 +2669,92 @@ transition: all 0.5s linear;
   cursor: zoom-out;
 }
 
-/* Navbar */
 .navigation-bar {
   width: 100%;
   display: flex;
   flex-direction: row;
-  display: -ms-flexbox;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   padding: 0.5rem 5%;
   gap: 2rem;
-  backdrop-filter: blur(0.2rem) ;
+  backdrop-filter: blur(0.2rem);
+  transition: all 0.3s ease;
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.linkWrapper {
+  display: none;
+}
+
+.sidebar-trigger {
+  display: block;
+  cursor: pointer;
+}
+
+/* Mobile layout when menu is open */
+.navbar-mobile-open {
+  flex-direction: column;
+}
+
+.navbar-mobile-open .linkWrapper {
+  display: flex !important;
+  flex-direction: column;
+  gap: 1rem;
+}
+.logoWrapper{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content:space-between ;
+  width: 100%;
+  gap: 0.5rem;}
 
+  ._closeNav{display: block;}
+
+
+  /* Desktop layout */
+@media screen and (min-width: 900px) {
+  .navigation-bar {
+    flex-direction: row;
+    height: var(--navHeight) !important;
+     justify-content: space-between !important;
+     overflow-y: visible !important;
+  }
+
+  .linkWrapper {
+    display: flex !important;
+    flex-direction: row;
+    gap: 1rem;
+  }
+
+  .sidebar-trigger {
+    display: none;
+  }
+  ._closeNav{display: none !important;}
+  .logoWrapper{display: block;  width:fit-content !important;}
 }
-.fixed_top_navbar{
+
+
+/* Show links vertically when toggled on mobile */
+.navbar-links-visible {
+  display: flex !important;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+
+.fixed_top_navbar , .fixedTop {
   position: fixed;
   top: 0;
   width: 100%;
-  right: 0;
+  left: 0;
   z-index: var(--navBarZindex);
+  background-color: var(--raiseThemes) ;
+
 }
 
+
 .navigation-bar.transparent{  backdrop-filter: none !important ;}
 
 .fun_side_bar_wrapper{
@@ -2574,86 +2775,6 @@ transition: all 0.5s linear;
 }
 
 
-.fun_sidebar_content{
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 220px;
-  background-color: var(--raiseThemes);
-  animation: SlideRight 0.2s linear;
-  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
-  z-index: var(--sideBarZindex);
-  overflow: auto;
-  overflow-x: hidden;
-
-}
-
-.fun_main_content{
-  position: absolute; 
-  top: 0;
-  right:0;
-  height: 100%;
-  overflow-y: auto; 
-  padding: 1rem; 
-
-}
-.there_is_sidebar , .fun_main_content{
-  width: calc(100% - 220px); 
-  right:0  !important;
-  }
-@media(max-width:800px){
-  .fun_side_bar_wrapper{
-    display: none;
-  }
-  .there_is_sidebar{
-    width: 100%;
-  } 
-  .fun_main_content{
-    width: 100%;
-  }
-}
-
-@keyframes showNav {
-  from{
-    transform: translateX(-110%);
-  }
-  to{
-    transform: translateX(0%);
-  }
-}
-
-
-.collapse {
-  overflow: auto;
-  transition: 0.5s;
-  display: block;
-  width: 100%;
-  max-height: fit-content;
-}
-.linkWrapperLogo {
-  display: none;
-}
-@media (max-width: 1000px) {
-  .sidebar-trigger {
-    display: block;
-  }
-
-  .linkWrapper {
-    display: none;
-  }
-.linkWrapper.visibleLinks{
-  display: inline-block;
-}
-}
-
-.fixedTop {
-  position: fixed !important;
-  top: 0;
-  left: 0;
-  z-index: 10;
-}
 
 /* Alerts */
 .alert {
@@ -3481,9 +3602,6 @@ th {
 
 
 .modal-title {
-  padding: 1rem;
-  border-bottom: 0.1px solid var(--borderColor);
-  min-height: 70px;
   height: fit-content;
   display: flex;
   flex-direction: row;
@@ -3495,25 +3613,22 @@ th {
 .modal-content {
   background-color: var(--raiseThemes);
   max-width: 700px;
-  width: 100%;
+  padding: 1rem 1.5rem;
   border-radius: 10px;
   box-shadow: var(--card);
   height: fit-content ;
 
 }
 .modal-body {
-  padding: 1rem ;
   height: 100%;
-  /* max-height: calc(100vh - 200px) ; */
   overflow: auto;
 }
 
 .modal-action {
-  padding: 1rem ;
   height: fit-content;
 }
 
-.closeModal {
+/* .closeModal {
   width: 2.2rem;
   height: 2.2rem;
   background-color: var(--dark800);
@@ -3524,7 +3639,7 @@ th {
   border-radius: 50%;
   transition: 0.3s linear;
   cursor: pointer;
-}
+} */
 .closeModal:hover {
 filter: brightness(90%);
 }

package/index.d.ts

@@ -0,0 +1,35 @@
+export { default as Alert } from "./ui/alert/Alert";
+export { default as Button } from "./ui/button/Button";
+export { default as Card } from "./ui/card/Card";
+export { default as BreadCrumb } from "./ui/breadcrumb/BreadCrumb";
+export { default as Container } from "./ui/container/Container";
+export { default as Grid } from "./ui/grid/Grid";
+export { default as Col } from "./ui/grid/Col";
+export { default as Input } from "./ui/input/Input";
+export { default as Loader } from "./ui/loader/Loader";
+export { default as Modal } from "./ui/modal/Modal";
+export { default as Table } from "./ui/table/Table";
+export { default as List } from "./ui/list/List";
+export { default as Text } from "./ui/text/Text";
+export { default as Div } from "./ui/div/Div";
+export { default as StepContainer } from "./ui/step/Container";
+export { default as Step } from "./ui/step/Step";
+export { default as StepHeader } from "./ui/step/Header";
+export { default as StepLine } from "./ui/step/Line";
+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 DropItem } from "./ui/drop/Item";
+export { default as DropMenu } from "./ui/drop/Menu";
+export { default as ProgressBar } from "./ui/progress/Bar";
+export { default as FunLoader } from "./ui/loader/Loader";
+export { default as Notification } from "./ui/notification/Notification";
+export { default as ToolTip } from "./ui/tooltip/ToolTip";
+export { default as AppBar } from "./ui/appbar/AppBar";
+export { default as Tip } from "./ui/tooltip/Tip";
+export { default as RowFlex } from "./ui/specials/RowFlex";
+export { default as Section } from "./ui/specials/Section";
+export { default as Hr } from "./ui/specials/Hr";
+export { default as Circle } from "./ui/specials/Circle";
+export { default as FullCenteredPage } from "./ui/specials/FullCenteredPage";

package/index.js

@@ -0,0 +1,76 @@
+"use strict";
+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.Alert = void 0;
+var Alert_1 = require("./ui/alert/Alert");
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
+var Button_1 = require("./ui/button/Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+var Card_1 = require("./ui/card/Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(Card_1).default; } });
+var BreadCrumb_1 = require("./ui/breadcrumb/BreadCrumb");
+Object.defineProperty(exports, "BreadCrumb", { enumerable: true, get: function () { return __importDefault(BreadCrumb_1).default; } });
+var Container_1 = require("./ui/container/Container");
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return __importDefault(Container_1).default; } });
+var Grid_1 = require("./ui/grid/Grid");
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return __importDefault(Grid_1).default; } });
+var Col_1 = require("./ui/grid/Col");
+Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return __importDefault(Col_1).default; } });
+var Input_1 = require("./ui/input/Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(Input_1).default; } });
+var Loader_1 = require("./ui/loader/Loader");
+Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return __importDefault(Loader_1).default; } });
+var Modal_1 = require("./ui/modal/Modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });
+var Table_1 = require("./ui/table/Table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+var List_1 = require("./ui/list/List");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return __importDefault(List_1).default; } });
+var Text_1 = require("./ui/text/Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });
+var Div_1 = require("./ui/div/Div");
+Object.defineProperty(exports, "Div", { enumerable: true, get: function () { return __importDefault(Div_1).default; } });
+var Container_2 = require("./ui/step/Container");
+Object.defineProperty(exports, "StepContainer", { enumerable: true, get: function () { return __importDefault(Container_2).default; } });
+var Step_1 = require("./ui/step/Step");
+Object.defineProperty(exports, "Step", { enumerable: true, get: function () { return __importDefault(Step_1).default; } });
+var Header_1 = require("./ui/step/Header");
+Object.defineProperty(exports, "StepHeader", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
+var Line_1 = require("./ui/step/Line");
+Object.defineProperty(exports, "StepLine", { enumerable: true, get: function () { return __importDefault(Line_1).default; } });
+var NotFound_1 = require("./ui/page/NotFound");
+Object.defineProperty(exports, "NotFound", { enumerable: true, get: function () { return __importDefault(NotFound_1).default; } });
+var UnAuthorized_1 = require("./ui/page/UnAuthorized");
+Object.defineProperty(exports, "UnAuthorized", { enumerable: true, get: function () { return __importDefault(UnAuthorized_1).default; } });
+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 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");
+Object.defineProperty(exports, "DropMenu", { enumerable: true, get: function () { return __importDefault(Menu_1).default; } });
+var Bar_1 = require("./ui/progress/Bar");
+Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return __importDefault(Bar_1).default; } });
+var Loader_2 = require("./ui/loader/Loader");
+Object.defineProperty(exports, "FunLoader", { enumerable: true, get: function () { return __importDefault(Loader_2).default; } });
+var Notification_1 = require("./ui/notification/Notification");
+Object.defineProperty(exports, "Notification", { enumerable: true, get: function () { return __importDefault(Notification_1).default; } });
+var ToolTip_1 = require("./ui/tooltip/ToolTip");
+Object.defineProperty(exports, "ToolTip", { enumerable: true, get: function () { return __importDefault(ToolTip_1).default; } });
+var AppBar_1 = require("./ui/appbar/AppBar");
+Object.defineProperty(exports, "AppBar", { enumerable: true, get: function () { return __importDefault(AppBar_1).default; } });
+var Tip_1 = require("./ui/tooltip/Tip");
+Object.defineProperty(exports, "Tip", { enumerable: true, get: function () { return __importDefault(Tip_1).default; } });
+var RowFlex_1 = require("./ui/specials/RowFlex");
+Object.defineProperty(exports, "RowFlex", { enumerable: true, get: function () { return __importDefault(RowFlex_1).default; } });
+var Section_1 = require("./ui/specials/Section");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(Section_1).default; } });
+var Hr_1 = require("./ui/specials/Hr");
+Object.defineProperty(exports, "Hr", { enumerable: true, get: function () { return __importDefault(Hr_1).default; } });
+var Circle_1 = require("./ui/specials/Circle");
+Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return __importDefault(Circle_1).default; } });
+var FullCenteredPage_1 = require("./ui/specials/FullCenteredPage");
+Object.defineProperty(exports, "FullCenteredPage", { enumerable: true, get: function () { return __importDefault(FullCenteredPage_1).default; } });

package/index.tsx

@@ -0,0 +1,35 @@
+export { default as Alert } from "./ui/alert/Alert"
+export { default as Button } from "./ui/button/Button"
+export { default as Card } from "./ui/card/Card"
+export { default as BreadCrumb } from "./ui/breadcrumb/BreadCrumb"
+export { default as Container } from "./ui/container/Container"
+export { default as Grid } from "./ui/grid/Grid"
+export { default as Col } from "./ui/grid/Col"
+export { default as Input } from "./ui/input/Input"
+export { default as Loader } from "./ui/loader/Loader"
+export { default as Modal } from "./ui/modal/Modal"
+export { default as Table } from "./ui/table/Table"
+export { default as List } from "./ui/list/List"
+export { default as Text } from "./ui/text/Text"
+export { default as Div } from "./ui/div/Div"
+export { default as StepContainer } from "./ui/step/Container"
+export { default as Step } from "./ui/step/Step"
+export { default as StepHeader } from "./ui/step/Header"
+export { default as StepLine } from "./ui/step/Line"
+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 DropItem } from "./ui/drop/Item"
+export { default as DropMenu } from "./ui/drop/Menu"
+export { default as ProgressBar } from "./ui/progress/Bar"
+export { default as FunLoader } from "./ui/loader/Loader";
+export { default as Notification } from "./ui/notification/Notification"
+export { default as ToolTip } from "./ui/tooltip/ToolTip"
+export { default as AppBar } from "./ui/appbar/AppBar"
+export { default as Tip } from "./ui/tooltip/Tip"
+export { default as RowFlex } from "./ui/specials/RowFlex"
+export { default as Section } from "./ui/specials/Section"
+export { default as Hr } from "./ui/specials/Hr"
+export { default as Circle } from "./ui/specials/Circle"
+export { default as FullCenteredPage } from "./ui/specials/FullCenteredPage"

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.0",
+  "version": "2.5.2",
   "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",