funuicss 3.6.20 → 3.7.1

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);
 }
@@ -2352,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;
@@ -2392,7 +2397,9 @@ border-radius: var(--borderRadius);
   background-color: transparent;
 }
 
-
+.no_label{
+  padding:var(--inputPadding) !important;
+}
 /* Status Input Styles */
 .input.success-input,
 .input.warning-input,
@@ -2417,14 +2424,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),
@@ -3722,14 +3721,7 @@ padding-right: 2.5rem;
 
 
 /* tables */
-.table.bordered > tr,
-thead {
-  border-bottom: var(--border);
-}
-.table thead > td,
-th {
-  font-weight: bold;
-}
+
 .table , table {
   width: 100%;
   text-align: left;
@@ -3741,7 +3733,12 @@ th {
   border: var(--border);
 }
 
-.table.stripped tr:nth-child(even) {
+
+th{font-weight: 400 !important; }
+thead{ background-color: var(--lighter); border-radius: var(--radius) !important;}
+
+
+.table.stripped tr:nth-child(odd) {
   background-color: var(--lighter); 
 }
 .table tr,
@@ -9758,3 +9755,4 @@ transform: translateY(-50%);
   -webkit-background-clip: text;
 }
 
+

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.20",
+  "version": "3.7.1",
   "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",

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;