funuicss 3.6.19 → 3.7.0

package/css/fun.css

@@ -207,7 +207,7 @@
   --loaderZindex:100;
   --snackBarZindex:20;
   --notificationZindex:29;
-  --inputButtonHeight:2.4rem;
+  --inputButtonHeight:2.5rem;
   --inputPadding:1rem;
   --inputRoundedPadding:0.5rem 1rem;
   --shadowMedium:0 0.8rem 2rem 0 rgba(3, 3, 3, 0.1);
@@ -607,115 +607,114 @@
 
 /* Font utilities with matching line heights */
 .text-xs {
-  font-size: var(--text-xs-responsive);
-  line-height: var(--leading-xs-responsive);
+  font-size: var(--text-xs-responsive) !important;
+  line-height: var(--leading-xs-responsive) !important;
 }
 
 .text-sm {
-  font-size: var(--text-sm-responsive);
-  line-height: var(--leading-sm-responsive);
+  font-size: var(--text-sm-responsive) !important;
+  line-height: var(--leading-sm-responsive) !important;
 }
 
 .text-base {
-  font-size: var(--text-base-responsive);
-  line-height: var(--leading-base-responsive);
+  font-size: var(--text-base-responsive) !important;
+  line-height: var(--leading-base-responsive) !important;
 }
 
 .text-lg {
-  font-size: var(--text-lg-responsive);
-  line-height: var(--leading-lg-responsive);
+  font-size: var(--text-lg-responsive) !important;
+  line-height: var(--leading-lg-responsive) !important;
 }
 
 .text-xl {
-  font-size: var(--text-xl-responsive);
-  line-height: var(--leading-xl-responsive);
-  font-weight: 400;
+  font-size: var(--text-xl-responsive) !important;
+  line-height: var(--leading-xl-responsive) !important;
+  font-weight: 400 !important;
 }
 
 .text-2xl {
-  font-size: var(--text-2xl-responsive);
-  line-height: var(--leading-2xl-responsive);
-  font-weight: 500;
+  font-size: var(--text-2xl-responsive) !important;
+  line-height: var(--leading-2xl-responsive) !important;
+  font-weight: 500 !important;
 }
 
 .text-3xl {
-  font-size: var(--text-3xl-responsive);
-  line-height: var(--leading-3xl-responsive);
-  font-weight: 500;
+  font-size: var(--text-3xl-responsive) !important;
+  line-height: var(--leading-3xl-responsive) !important;
+  font-weight: 500 !important;
 }
 
 .text-4xl {
-  font-size: var(--text-4xl-responsive);
-  line-height: var(--leading-4xl-responsive);
-  font-weight: 600;
+  font-size: var(--text-4xl-responsive) !important;
+  line-height: var(--leading-4xl-responsive) !important;
+  font-weight: 600 !important;
 }
 
 .text-5xl {
-  font-size: var(--text-5xl-responsive);
-  line-height: var(--leading-5xl-responsive);
-  font-weight: 600;
+  font-size: var(--text-5xl-responsive) !important;
+  line-height: var(--leading-5xl-responsive) !important;
+  font-weight: 600 !important;
 }
 
 .text-6xl {
-  font-size: var(--text-6xl-responsive);
-  line-height: var(--leading-6xl-responsive);
-  font-weight: 600;
+  font-size: var(--text-6xl-responsive) !important;
+  line-height: var(--leading-6xl-responsive) !important;
+  font-weight: 600 !important;
 }
 
 .text-7xl {
-  font-size: var(--text-7xl-responsive);
-  line-height: var(--leading-7xl-responsive);
-  font-weight: 600;
+  font-size: var(--text-7xl-responsive) !important;
+  line-height: var(--leading-7xl-responsive) !important;
+  font-weight: 600 !important;
 }
 
 .text-8xl {
-  font-size: var(--text-8xl-responsive);
-  line-height: var(--leading-8xl-responsive);
-  font-weight: 800;
+  font-size: var(--text-8xl-responsive) !important;
+  line-height: var(--leading-8xl-responsive) !important;
+  font-weight: 800 !important;
 }
 
 .text-9xl {
-  font-size: var(--text-9xl-responsive);
-  line-height: var(--leading-9xl-responsive);
-  font-weight: 900;
+  font-size: var(--text-9xl-responsive) !important;
+  line-height: var(--leading-9xl-responsive) !important;
+  font-weight: 900 !important;
 }
 
 .text-10xl {
-  font-size: var(--text-10xl-responsive);
-  line-height: var(--leading-10xl-responsive);
-  font-weight: 900;
+  font-size: var(--text-10xl-responsive) !important;
+  line-height: var(--leading-10xl-responsive) !important;
+  font-weight: 900 !important;
 }
 
 .text-big {
-  font-size: var(--font-size-big-responsive);
-  line-height: var(--line-height-big-responsive);
-  font-weight: var(--font-weight-big);
-  font-style: var(--font-style-big);
-  text-decoration: var(--text-decoration-big);
-  text-transform: var(--text-transform-big);
-  letter-spacing: var(--letter-spacing-big);
+  font-size: var(--font-size-big-responsive) !important;
+  line-height: var(--line-height-big-responsive) !important;
+  font-weight: var(--font-weight-big) !important;
+  font-style: var(--font-style-big) !important;
+  text-decoration: var(--text-decoration-big) !important;
+  text-transform: var(--text-transform-big) !important;
+  letter-spacing: var(--letter-spacing-big) !important;
 }
 
 .text-bigger {
-  font-size: var(--font-size-bigger-responsive);
-  line-height: var(--line-height-bigger-responsive);
-  font-weight: var(--font-weight-bigger);
-  font-style: var(--font-style-bigger);
-  text-decoration: var(--text-decoration-bigger);
-  text-transform: var(--text-transform-bigger);
-  letter-spacing: var(--letter-spacing-bigger);
+  font-size: var(--font-size-bigger-responsive) !important;
+  line-height: var(--line-height-bigger-responsive) !important;
+  font-weight: var(--font-weight-bigger) !important;
+  font-style: var(--font-style-bigger) !important;
+  text-decoration: var(--text-decoration-bigger) !important;
+  text-transform: var(--text-transform-bigger) !important;
+  letter-spacing: var(--letter-spacing-bigger) !important;
 }
 
 .text-jumbo {
-  font-size: var(--font-size-jumbo-responsive);
-  line-height: var(--line-height-jumbo-responsive);
-  font-weight: var(--font-weight-jumbo);
-  font-style: var(--font-style-jumbo);
-  text-decoration: var(--text-decoration-jumbo);
-  text-transform: var(--text-transform-jumbo);
-  letter-spacing: var(--letter-spacing-jumbo);
+  font-size: var(--font-size-jumbo-responsive) !important;
+  line-height: var(--line-height-jumbo-responsive) !important;
+  font-weight: var(--font-weight-jumbo) !important;
+  font-style: var(--font-style-jumbo) !important;
+  text-decoration: var(--text-decoration-jumbo) !important;
+  text-transform: var(--text-transform-jumbo) !important;
+  letter-spacing: var(--letter-spacing-jumbo) !important;
 }
-
 .important{
   font-weight: 700;
   color: var(--primary) !important;
@@ -723,23 +722,23 @@
 
 /* Mini sizes */
 .text-small {
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-small);
-  font-weight: var(--font-weight-small);
-  font-style: var(--font-style-small);
-  text-decoration: var(--text-decoration-small);
-  text-transform: var(--text-transform-small);
-  letter-spacing: var(--letter-spacing-small);
+  font-size: var(--font-size-small) !important;
+  line-height: var(--line-height-small) !important;
+  font-weight: var(--font-weight-small) !important;
+  font-style: var(--font-style-small) !important;
+  text-decoration: var(--text-decoration-small) !important;
+  text-transform: var(--text-transform-small) !important;
+  letter-spacing: var(--letter-spacing-small) !important;
 }
 
 .text-smaller {
-  font-size: var(--font-size-smaller);
-  line-height: var(--line-height-smaller);
-  font-weight: var(--font-weight-smaller);
-  font-style: var(--font-style-smaller);
-  text-decoration: var(--text-decoration-smaller);
-  text-transform: var(--text-transform-smaller);
-  letter-spacing: var(--letter-spacing-smaller);
+  font-size: var(--font-size-smaller) !important;
+  line-height: var(--line-height-smaller) !important;
+  font-weight: var(--font-weight-smaller) !important;
+  font-style: var(--font-style-smaller) !important;
+  text-decoration: var(--text-decoration-smaller) !important;
+  text-transform: var(--text-transform-smaller) !important;
+  letter-spacing: var(--letter-spacing-smaller) !important;
 }
 
 /* Headings */
@@ -761,69 +760,69 @@ h1,
   font-weight: normal;
 }
 
+
 h1, .h1 {
-  font-size: var(--font-size-h1-responsive);
-  line-height: var(--line-height-h1-responsive);
-  font-weight: var(--font-weight-h1);
-  font-style: var(--font-style-h1);
-  text-decoration: var(--text-decoration-h1);
-  text-transform: var(--text-transform-h1);
-  letter-spacing: var(--letter-spacing-h1);
+  font-size: var(--font-size-h1-responsive) !important;
+  line-height: var(--line-height-h1-responsive) !important;
+  font-weight: var(--font-weight-h1) !important;
+  font-style: var(--font-style-h1) !important;
+  text-decoration: var(--text-decoration-h1) !important;
+  text-transform: var(--text-transform-h1) !important;
+  letter-spacing: var(--letter-spacing-h1) !important;
 }
 
 h2, .h2 {
-  font-size: var(--font-size-h2-responsive);
-  line-height: var(--line-height-h2-responsive);
-  font-weight: var(--font-weight-h2);
-  font-style: var(--font-style-h2);
-  text-decoration: var(--text-decoration-h2);
-  text-transform: var(--text-transform-h2);
-  letter-spacing: var(--letter-spacing-h2);
+  font-size: var(--font-size-h2-responsive) !important;
+  line-height: var(--line-height-h2-responsive) !important;
+  font-weight: var(--font-weight-h2) !important;
+  font-style: var(--font-style-h2) !important;
+  text-decoration: var(--text-decoration-h2) !important;
+  text-transform: var(--text-transform-h2) !important;
+  letter-spacing: var(--letter-spacing-h2) !important;
 }
 
 h3, .h3 {
-  font-size: var(--font-size-h3-responsive);
-  line-height: var(--line-height-h3-responsive);
-  font-weight: var(--font-weight-h3);
-  font-style: var(--font-style-h3);
-  text-decoration: var(--text-decoration-h3);
-  text-transform: var(--text-transform-h3);
-  letter-spacing: var(--letter-spacing-h3);
+  font-size: var(--font-size-h3-responsive) !important;
+  line-height: var(--line-height-h3-responsive) !important;
+  font-weight: var(--font-weight-h3) !important;
+  font-style: var(--font-style-h3) !important;
+  text-decoration: var(--text-decoration-h3) !important;
+  text-transform: var(--text-transform-h3) !important;
+  letter-spacing: var(--letter-spacing-h3) !important;
 }
 
 h4, .h4 {
-  font-size: var(--font-size-h4-responsive);
-  line-height: var(--line-height-h4-responsive);
-  font-weight: var(--font-weight-h4);
-  font-style: var(--font-style-h4);
-  text-decoration: var(--text-decoration-h4);
-  text-transform: var(--text-transform-h4);
-  letter-spacing: var(--letter-spacing-h4);
+  font-size: var(--font-size-h4-responsive) !important;
+  line-height: var(--line-height-h4-responsive) !important;
+  font-weight: var(--font-weight-h4) !important;
+  font-style: var(--font-style-h4) !important;
+  text-decoration: var(--text-decoration-h4) !important;
+  text-transform: var(--text-transform-h4) !important;
+  letter-spacing: var(--letter-spacing-h4) !important;
 }
 
 h5, .h5 {
-  font-size: var(--font-size-h5-responsive);
-  line-height: var(--line-height-h5-responsive);
-  font-weight: var(--font-weight-h5);
-  font-style: var(--font-style-h5);
-  text-decoration: var(--text-decoration-h5);
-  text-transform: var(--text-transform-h5);
-  letter-spacing: var(--letter-spacing-h5);
+  font-size: var(--font-size-h5-responsive) !important;
+  line-height: var(--line-height-h5-responsive) !important;
+  font-weight: var(--font-weight-h5) !important;
+  font-style: var(--font-style-h5) !important;
+  text-decoration: var(--text-decoration-h5) !important;
+  text-transform: var(--text-transform-h5) !important;
+  letter-spacing: var(--letter-spacing-h5) !important;
 }
 
 h6, .h6 {
-  font-size: var(--font-size-h6-responsive);
-  line-height: var(--line-height-h6-responsive);
-  font-weight: var(--font-weight-h6);
-  font-style: var(--font-style-h6);
-  text-decoration: var(--text-decoration-h6);
-  text-transform: var(--text-transform-h6);
-  letter-spacing: var(--letter-spacing-h6);
+  font-size: var(--font-size-h6-responsive) !important;
+  line-height: var(--line-height-h6-responsive) !important;
+  font-weight: var(--font-weight-h6) !important;
+  font-style: var(--font-style-h6) !important;
+  text-decoration: var(--text-decoration-h6) !important;
+  text-transform: var(--text-transform-h6) !important;
+  letter-spacing: var(--letter-spacing-h6) !important;
 }
 
 
 
-
 /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
 ::-webkit-scrollbar {
   width: 10px;
@@ -2312,8 +2311,14 @@ border-radius: var(--borderRadius);
   font-size: var(--minifiedFontSize);
   background-color: var(--page-bg);
   transition: all 0.2s ease;
+  border-radius: var(--radius);
+  padding-top: 1rem !important;
+  height: var(--inputButtonHeight);
+
+
 }
 
+
 .smallInput {
   font-size: var(--smallFont);
 }
@@ -2344,6 +2349,7 @@ border-radius: var(--borderRadius);
   font-size: var(--minifiedFontSize);
   color: var(--text-color);
   opacity: 0.6;
+  left: 0.9rem;
   pointer-events: none;
   transition: all 0.2s ease;
   background-color: transparent;
@@ -2351,7 +2357,7 @@ border-radius: var(--borderRadius);
 }
 
 .floating-label.active {
-  top: 0.35rem;
+  top: 0.25rem;
   font-size: 0.625rem;
   opacity: 1;
   background-color: transparent;
@@ -2416,14 +2422,6 @@ border-radius: var(--borderRadius);
   border-bottom-color: var(--info, var(--primary));
 }
 
-/* Input dimensions */
-input,
-select {
-  height: var(--inputButtonHeight);
-  border-radius: var(--radius);
-  padding-top: 1.2rem;
-  padding-bottom: 0.4rem;
-}
 
 /* When no label, use normal padding */
 input:not(:placeholder-shown),
@@ -6016,6 +6014,7 @@ background-color: rgba(0, 0, 0, 0.2);
   display: none; /* Chrome/Safari */
 }
 
+.carousel-wrapper{width: 100%; position: relative;}
 /* Scrollable carousel container */
 .carousel-container {
   display: flex;
@@ -6025,6 +6024,18 @@ background-color: rgba(0, 0, 0, 0.2);
   padding: 1rem 0;
   scroll-behavior: smooth;
 }
+.carouselLeft{
+position: absolute;
+top: 50%;
+left: 0;
+transform: translateY(-50%);
+}
+.carouselRight{
+position: absolute;
+top: 50%;
+right: 0;
+transform: translateY(-50%);
+}
 .carousel-item {scroll-snap-align: start;flex: 0 0 auto;}
 
 /* small screens */

package/index.d.ts

@@ -56,5 +56,6 @@ export { default as FlexItem } from "./ui/flex/FlexItem";
 export { default as ScrollToTop } from "./ui/scrolltotop/ScrollToTop";
 export { default as Select } from "./ui/select/Select";
 export { default as Cookie } from "./js/Cookie";
+export { useVariable } from "./ui/theme/theme";
 export { FunGet } from "./js/Fun";
 export { default as GoogleAnalytics } from "./js/google/analytics";

package/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.View = exports.ScrollInView = exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = 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.SearchableInput = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
-exports.GoogleAnalytics = exports.FunGet = exports.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
+exports.GoogleAnalytics = exports.FunGet = exports.useVariable = exports.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = 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");
@@ -122,6 +122,8 @@ Object.defineProperty(exports, "Select", { enumerable: true, get: function () {
 // js 
 var Cookie_1 = require("./js/Cookie");
 Object.defineProperty(exports, "Cookie", { enumerable: true, get: function () { return __importDefault(Cookie_1).default; } });
+var theme_2 = require("./ui/theme/theme");
+Object.defineProperty(exports, "useVariable", { enumerable: true, get: function () { return theme_2.useVariable; } });
 var Fun_1 = require("./js/Fun");
 Object.defineProperty(exports, "FunGet", { enumerable: true, get: function () { return Fun_1.FunGet; } });
 var analytics_1 = require("./js/google/analytics");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.19",
+  "version": "3.7.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",
@@ -44,7 +44,6 @@
   "dependencies": {
     "aos": "^2.3.4",
     "dayjs": "^1.11.13",
-    "firebase": "^12.3.0",
     "framer-motion": "^12.23.6",
     "hls.js": "^1.6.5",
     "next": "^13.4.4",

package/ui/carousel/Carousel.d.ts

@@ -7,6 +7,8 @@ interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     showDashes?: boolean;
     allowVerticalOverflow?: boolean;
     itemPadding?: string;
+    controlerSize?: number;
+    controlerIconSize?: number;
 }
 declare const Carousel: React.FC<CarouselProps>;
 export default Carousel;

package/ui/carousel/Carousel.js

@@ -65,11 +65,11 @@ var Circle_1 = __importDefault(require("../specials/Circle"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var Functions_1 = require("../../utils/Functions");
 var Carousel = function (_a) {
-    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '0rem' : _g, children = _a.children, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children"]);
+    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '0rem' : _g, children = _a.children, _h = _a.controlerSize, controlerSize = _h === void 0 ? 2.5 : _h, _j = _a.controlerIconSize, controlerIconSize = _j === void 0 ? 20 : _j, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children", "controlerSize", "controlerIconSize"]);
     var scrollRef = (0, react_1.useRef)(null);
-    var _h = (0, react_1.useState)('start'), scrollPosition = _h[0], setScrollPosition = _h[1];
-    var _j = (0, react_1.useState)(false), isPhone = _j[0], setIsPhone = _j[1];
-    var _k = (0, react_1.useState)(false), isScrollable = _k[0], setIsScrollable = _k[1];
+    var _k = (0, react_1.useState)('start'), scrollPosition = _k[0], setScrollPosition = _k[1];
+    var _l = (0, react_1.useState)(false), isPhone = _l[0], setIsPhone = _l[1];
+    var _m = (0, react_1.useState)(false), isScrollable = _m[0], setIsScrollable = _m[1];
     var checkScrollable = function () {
         var container = scrollRef.current;
         if (container) {
@@ -123,10 +123,10 @@ var Carousel = function (_a) {
         }
     }, []);
     return (react_1.default.createElement("div", __assign({ className: "carousel-wrapper ".concat(funcss) }, rest),
-        react_1.default.createElement(RowFlex_1.default, { gap: 1, wrap: "nowrap", alignItems: "center" },
-            !isPhone && isScrollable && (react_1.default.createElement("div", null,
-                react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('left'); } },
-                    react_1.default.createElement(pi_1.PiCaretLeft, { size: 24 })))),
+        react_1.default.createElement(react_1.default.Fragment, null,
+            !isPhone && isScrollable && (react_1.default.createElement("div", { className: 'carouselLeft' },
+                react_1.default.createElement(Circle_1.default, { bordered: true, size: controlerSize, onClick: function () { return scroll('left'); } },
+                    react_1.default.createElement(pi_1.PiCaretLeft, { className: 'text-primary', size: controlerIconSize })))),
             react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full", style: {
                     width: '100%',
                     gap: gap + 'rem',
@@ -139,9 +139,9 @@ var Carousel = function (_a) {
                     padding: itemPadding || "0.5rem"
                 } }, react_1.default.Children.map(children, function (child) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 } },
                 react_1.default.createElement("div", { className: "carousel-card" }, child))); })),
-            !isPhone && isScrollable && (react_1.default.createElement("div", null,
-                react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('right'); } },
-                    react_1.default.createElement(pi_1.PiCaretRight, { size: 24 }))))),
+            !isPhone && isScrollable && (react_1.default.createElement("div", { className: 'carouselRight' },
+                react_1.default.createElement(Circle_1.default, { bordered: true, size: controlerSize, onClick: function () { return scroll('right'); } },
+                    react_1.default.createElement(pi_1.PiCaretRight, { className: 'text-primary', size: controlerIconSize }))))),
         (showDashes && isScrollable) && (react_1.default.createElement("div", { className: "center padding-top-10" },
             react_1.default.createElement(RowFlex_1.default, { gap: 0.5, justify: "center" }, ['start', 'middle', 'end'].map(function (pos) { return (react_1.default.createElement("div", { className: 'pointer ', key: pos, onClick: function () {
                     var _a, _b;

package/ui/chart/Line.d.ts

@@ -11,23 +11,59 @@ type ChartSeries = {
     dot?: boolean;
     fromColor?: string;
     toColor?: string;
+    fillOpacity?: number;
+    strokeDasharray?: string;
+    activeDot?: boolean | Record<string, any>;
 };
+interface XAxisProps {
+    interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
+    tick?: boolean | Record<string, any>;
+    tickFormatter?: (value: any) => string;
+    domain?: [number | string | 'auto' | 'dataMin' | 'dataMax', number | string | 'auto' | 'dataMin' | 'dataMax'];
+    type?: 'number' | 'category';
+    allowDataOverflow?: boolean;
+}
+interface YAxisProps {
+    interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
+    tick?: boolean | Record<string, any>;
+    tickFormatter?: (value: any) => string;
+    domain?: [number | string | 'auto' | 'dataMin' | 'dataMax', number | string | 'auto' | 'dataMin' | 'dataMax'];
+    type?: 'number' | 'category';
+    allowDataOverflow?: boolean;
+}
+interface LegendProps {
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    layout?: 'horizontal' | 'vertical';
+    iconType?: 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye';
+}
+interface TooltipProps {
+    cursor?: boolean | Record<string, any>;
+    separator?: string;
+    offset?: number;
+    allowEscapeViewBox?: {
+        x?: boolean;
+        y?: boolean;
+    };
+}
 interface AreaChartProps {
-    data: DataItem[];
-    series: ChartSeries[];
+    data: DataItem[] | string;
+    series: ChartSeries[] | string;
     fromColor?: string;
     toColor?: string;
     id?: string;
+    variant?: string;
     showGrid?: boolean;
     horizontalLines?: boolean;
     showLegend?: boolean;
     showXAxis?: boolean;
     showYAxis?: boolean;
+    showTooltip?: boolean;
     funcss?: string;
-    curveType?: 'linear' | 'monotone' | 'step' | 'basis';
-    rotateLabel: string;
-    xLabelSize: string | number;
-    yLabelSize: string | number;
+    curveType?: 'linear' | 'monotone' | 'step' | 'basis' | 'natural';
+    rotateLabel?: number;
+    xLabelSize?: string | number;
+    yLabelSize?: string | number;
     height?: number | string;
     width?: number | string;
     margin?: {
@@ -36,13 +72,34 @@ interface AreaChartProps {
         left?: number;
         bottom?: number;
     };
-    xInterval: number;
-    yInterval: number;
+    xInterval?: number;
+    yInterval?: number;
+    gridStroke?: string;
+    gridStrokeDasharray?: string;
     dy?: number;
-    xAxisProps?: any;
-    yAxisProps?: any;
+    xAxisProps?: XAxisProps;
+    yAxisProps?: YAxisProps;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    tickLine?: boolean;
+    axisLine?: boolean;
     tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
-    legendProps?: any;
+    legendProps?: LegendProps;
+    tooltipProps?: TooltipProps;
+    customTooltip?: React.ComponentType<any>;
+    animation?: boolean;
+    animationDuration?: number;
+    isAnimationActive?: boolean;
+    syncId?: string;
+    chartBackground?: string;
+    borderRadius?: string;
+    padding?: string;
+    shadow?: boolean;
+    aspect?: number;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
 }
 declare const Lines: React.FC<AreaChartProps>;
 export default Lines;