funuicss 2.5.13 → 2.6.0

package/css/fun.css

@@ -246,7 +246,7 @@
   --inputPadding:0.5rem 0;
   --inputRoundedPadding:0.5rem 1rem;
   --shadowMedium:0 0.8rem 2rem 0 rgba(3, 3, 3, 0.1);
-  --card:rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
+  --card:rgba(0, 0, 0, 0.05) 0px 4px 16px, rgba(0, 0, 0, 0.05) 0px 8px 32px;
   --raised:0 0.1rem 0.2rem 0rem rgba(0, 0, 0, 0.3);
   /* medium Screen body */
 
@@ -451,7 +451,7 @@ link:hover {
 .primary50,
 .hover-primary50:hover {
   background-color: var(--primary50) !important;
-  color: var(--white);
+  color: var(--primary);
   stroke: var(--primary50);
 }
 
@@ -459,7 +459,7 @@ link:hover {
 .primary100,
 .hover-primary100:hover {
   background-color: var(--primary100) !important;
-  color: var(--white);
+  color: var(--primary);
   stroke: var(--primary100);
 }
 
@@ -467,7 +467,7 @@ link:hover {
 .primary200,
 .hover-primary200:hover {
   background-color: var(--primary200) !important;
-  color: var(--white);
+  color: var(--primary);
   stroke: var(--primary200);
 }
 
@@ -475,7 +475,7 @@ link:hover {
 .primary300,
 .hover-primary300:hover {
   background-color: var(--primary300) !important;
-  color: var(--white);
+  color: var(--primary);
   stroke: var(--primary300);
 }
 
@@ -540,7 +540,7 @@ link:hover {
 .secondary50,
 .hover-secondary50:hover {
   background-color: var(--secondary50) !important;
-  color: var(--white);
+  color: var(--secondary);
   stroke: var(--secondary50);
 }
 
@@ -548,7 +548,7 @@ link:hover {
 .secondary100,
 .hover-secondary100:hover {
   background-color: var(--secondary100) !important;
-  color: var(--white);
+  color: var(--secondary);
   stroke: var(--secondary100);
 }
 
@@ -556,7 +556,7 @@ link:hover {
 .secondary200,
 .hover-secondary200:hover {
   background-color: var(--secondary200) !important;
-  color: var(--white);
+  color: var(--secondary);
   stroke: var(--secondary200);
 }
 
@@ -564,7 +564,7 @@ link:hover {
 .secondary300,
 .hover-secondary300:hover {
   background-color: var(--secondary300) !important;
-  color: var(--white);
+  color: var(--secondary);
   stroke: var(--secondary300);
 }
 
@@ -626,7 +626,7 @@ link:hover {
 .accent50,
 .hover-accent50:hover {
   background-color: var(--accent50) !important;
-  color: var(--black);
+  color: var(--accent900);
   stroke: var(--accent50);
 }
 
@@ -705,7 +705,7 @@ link:hover {
 .error50,
 .hover-error50:hover {
   background-color: var(--error50) !important;
-  color: var(--white);
+  color: var(--error);
   stroke: var(--error50);
 }
 
@@ -713,7 +713,7 @@ link:hover {
 .error100,
 .hover-error100:hover {
   background-color: var(--error100) !important;
-  color: var(--white);
+  color: var(--error);
   stroke: var(--error100);
 }
 
@@ -721,7 +721,7 @@ link:hover {
 .error200,
 .hover-error200:hover {
   background-color: var(--error200) !important;
-  color: var(--white);
+  color: var(--error);
   stroke: var(--error200);
 }
 
@@ -729,7 +729,7 @@ link:hover {
 .error300,
 .hover-error300:hover {
   background-color: var(--error300) !important;
-  color: var(--white);
+  color: var(--error);
   stroke: var(--error300);
 }
 
@@ -793,7 +793,7 @@ link:hover {
 .success50,
 .hover-success50:hover {
   background-color: var(--success50) !important;
-  color: var(--white);
+  color: var(--success);
   stroke: var(--success50);
 }
 
@@ -801,7 +801,7 @@ link:hover {
 .success100,
 .hover-success100:hover {
   background-color: var(--success100) !important;
-  color: var(--white);
+  color: var(--success);
   stroke: var(--success100);
 }
 
@@ -809,7 +809,7 @@ link:hover {
 .success200,
 .hover-success200:hover {
   background-color: var(--success200) !important;
-  color: var(--white);
+  color: var(--success);
   stroke: var(--success200);
 }
 
@@ -817,7 +817,7 @@ link:hover {
 .success300,
 .hover-success300:hover {
   background-color: var(--success300) !important;
-  color: var(--white);
+  color: var(--success);
   stroke: var(--success300);
 }
 
@@ -881,7 +881,7 @@ link:hover {
 .warning50,
 .hover-warning50:hover {
   background-color: var(--warning50) !important;
-  color: var(--white);
+  color: var(--warning);
   stroke: var(--warning50);
 }
 
@@ -889,7 +889,7 @@ link:hover {
 .warning100,
 .hover-warning100:hover {
   background-color: var(--warning100) !important;
-  color: var(--white);
+  color: var(--warning);
   stroke: var(--warning100);
 }
 
@@ -897,7 +897,7 @@ link:hover {
 .warning200,
 .hover-warning200:hover {
   background-color: var(--warning200) !important;
-  color: var(--white);
+  color: var(--warning);
   stroke: var(--warning200);
 }
 
@@ -905,7 +905,7 @@ link:hover {
 .warning300,
 .hover-warning300:hover {
   background-color: var(--warning300) !important;
-  color: var(--white);
+  color: var(--warning);
   stroke: var(--warning300);
 }
 
@@ -969,7 +969,7 @@ link:hover {
 .muted50,
 .hover-muted50:hover {
   background-color: var(--muted50) !important;
-  color: var(--white);
+  color: var(--muted);
   stroke: var(--muted50);
 }
 
@@ -977,7 +977,7 @@ link:hover {
 .muted100,
 .hover-muted100:hover {
   background-color: var(--muted100) !important;
-  color: var(--white);
+  color: var(--muted);
   stroke: var(--muted100);
 }
 
@@ -985,7 +985,7 @@ link:hover {
 .muted200,
 .hover-muted200:hover {
   background-color: var(--muted200) !important;
-  color: var(--white);
+  color: var(--muted);
   stroke: var(--muted200);
 }
 
@@ -993,7 +993,7 @@ link:hover {
 .muted300,
 .hover-muted300:hover {
   background-color: var(--muted300) !important;
-  color: var(--white);
+  color: var(--muted);
   stroke: var(--muted300);
 }
 
@@ -1057,7 +1057,7 @@ link:hover {
 .info50,
 .hover-info50:hover {
   background-color: var(--info50) !important;
-  color: var(--white);
+  color: var(--info);
   stroke: var(--info50);
 }
 
@@ -1065,7 +1065,7 @@ link:hover {
 .info100,
 .hover-info100:hover {
   background-color: var(--info100) !important;
-  color: var(--white);
+  color: var(--info);
   stroke: var(--info100);
 }
 
@@ -1073,7 +1073,7 @@ link:hover {
 .info200,
 .hover-info200:hover {
   background-color: var(--info200) !important;
-  color: var(--white);
+  color: var(--info);
   stroke: var(--info200);
 }
 
@@ -1081,7 +1081,7 @@ link:hover {
 .info300,
 .hover-info300:hover {
   background-color: var(--info300) !important;
-  color: var(--white);
+  color: var(--info);
   stroke: var(--info300);
 }
 
@@ -1185,23 +1185,27 @@ link:hover {
 .hover-dark600:hover {
   background-color: var(--dark600) !important;
   stroke: var(--dark600);
+   color: var(--dark50);
 }
 
 .dark700,
 .hover-dark700:hover {
   background-color: var(--dark700) !important;
   stroke: var(--dark700);
+   color: var(--dark100);
 }
 .dark800,
 .hover-dark800:hover {
   background-color: var(--dark800) !important;
   stroke: var(--dark800);
+   color: var(--dark100);
 }
 
 .dark900,
 .hover-dark900:hover {
   background-color: var(--dark900) !important;
   stroke: var(--dark900);
+  color: var(--dark100);
 }
 
 .black,
@@ -3349,6 +3353,16 @@ h6, .h6 {
   border-radius: 50%;
 }
 
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  font-weight: bold;
+}
+
+
 /* dropdown */
 .dropdown,
 .dropup {
@@ -3928,7 +3942,7 @@ th {
   display: flex;
   justify-content: center;
   left: 0;
-  padding: 1rem;
+  padding:  2rem;
   z-index: var(--modalZIndex);
   width: 100%;
   height: 100%;
@@ -3975,6 +3989,7 @@ th {
 }
 
 
+
 .modal-title {
   height: fit-content;
   display: flex;
@@ -3988,7 +4003,7 @@ th {
   background-color: var(--raiseThemes);
   max-width: 700px;
   padding: 1rem 1.5rem;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   box-shadow: var(--card);
   height: fit-content ;
 

package/index.d.ts

@@ -34,4 +34,8 @@ 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 CircleGroup } from "./ui/specials/CircleGroup";
 export { default as FullCenteredPage } from "./ui/specials/FullCenteredPage";
+export { default as Bars } from "./ui/chart/Bar";
+export { default as Lines } from "./ui/chart/Line";
+export { default as ChartPie } from "./ui/chart/Pie";

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.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.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = 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");
@@ -76,5 +76,13 @@ 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 CircleGroup_1 = require("./ui/specials/CircleGroup");
+Object.defineProperty(exports, "CircleGroup", { enumerable: true, get: function () { return __importDefault(CircleGroup_1).default; } });
 var FullCenteredPage_1 = require("./ui/specials/FullCenteredPage");
 Object.defineProperty(exports, "FullCenteredPage", { enumerable: true, get: function () { return __importDefault(FullCenteredPage_1).default; } });
+var Bar_2 = require("./ui/chart/Bar");
+Object.defineProperty(exports, "Bars", { enumerable: true, get: function () { return __importDefault(Bar_2).default; } });
+var Line_2 = require("./ui/chart/Line");
+Object.defineProperty(exports, "Lines", { enumerable: true, get: function () { return __importDefault(Line_2).default; } });
+var Pie_1 = require("./ui/chart/Pie");
+Object.defineProperty(exports, "ChartPie", { enumerable: true, get: function () { return __importDefault(Pie_1).default; } });

package/index.tsx

@@ -34,4 +34,8 @@ 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 CircleGroup } from "./ui/specials/CircleGroup"
 export { default as FullCenteredPage } from "./ui/specials/FullCenteredPage"
+export { default as Bars } from "./ui/chart/Bar"
+export { default as Lines } from "./ui/chart/Line"
+export { default as ChartPie } from "./ui/chart/Pie"

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.13",
+  "version": "2.6.0",
   "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",
@@ -47,7 +47,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-easy-export": "^1.0.1",
-    "react-icons": "^5.0.1"
+    "react-icons": "^5.0.1",
+    "recharts": "^2.15.3"
   },
   "devDependencies": {
     "@babel/core": "^7.22.11",

package/tsconfig.json

@@ -15,6 +15,6 @@
     "incremental": true,
     "composite": true
   },
-  "include": ["ui/**/*", "types/**/*", "next-env.d.ts"],
+  "include": ["ui/**/*", "types/**/*", "next-env.d.ts" , "index.tsx" , "utils/**/*"],
   "exclude": ["node_modules"]
 }