funuicss 2.7.10 → 2.7.11

package/css/fun.css

@@ -222,6 +222,7 @@
 }
 
 
+
 /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
 ::-webkit-scrollbar {
   width: 10px;
@@ -1949,16 +1950,19 @@ body {
 
 .text-bigger {
   font-size: calc(1.375rem + 2.5vw);
-  line-height: calc(1.5rem + 2.5vw);
+  line-height: normal;
     font-weight: 900;
 }
 
 .text-jumbo {
   font-size: calc(1.375rem + 5vw);
-  line-height: calc(1.5rem + 5.5vw);
+  line-height: normal;
   font-weight: 900;
 }
-
+.important{
+  font-weight: 700;
+  color: var(--primary) !important	;
+}
 /* Mini sizes */
 .text-small {
   font-size: var(--smallFont);
@@ -1970,7 +1974,7 @@ body {
   line-height: 1.125rem;
 }
 
-.text-minified {
+.text-minified  , .text-md{
   font-size: var(--minifiedFontSize);
   line-height: 1rem;
 }
@@ -2396,6 +2400,8 @@ h6, .h6 {
   /* filter: brightness(90%); */
 
 }
+.hoverable-border{border: 0.1rem solid transparent;transition: 0.3s ease-in-out;}
+.hoverable-border:hover{border: var(--border);}
 
 .rightRounded{
   border-top-right-radius: 300rem !important;
@@ -3284,6 +3290,8 @@ color: var(--text-color);
 }
 
 
+
+
 .avatar {
   display: flex;
   align-items: center;
@@ -3908,6 +3916,126 @@ max-height: 500px; /* large enough to contain most content */
 opacity: 0.9;
 }
 
+.vista {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Padding presets */
+.padding-sm {
+  padding: 2rem 1rem;
+}
+
+.padding-lg {
+  padding: 5rem 1.5rem;
+}
+
+/* Background options */
+.bg-white {
+  background-color: white;
+}
+
+.bg-light {
+  background-color: #f9f9f9;
+}
+
+.bg-dark {
+  background-color: #1e1e1e;
+  color: white;
+}
+
+
+
+.vista{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vista-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2rem;
+  justify-content: center;
+}
+
+
+
+.vista.centered .vista-container {
+  flex-direction: column;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.vista.stacked .vista-container {
+  flex-direction: column;
+}
+
+.vista.imageLeft .vista-container,
+.vista.imageRight .vista-container {
+  flex-direction: row;
+}
+
+.vista.reverse .vista-container {
+  flex-direction: row-reverse;
+}
+
+/* Text alignment */
+.vista.text-left .vista-text {
+  text-align: left;
+}
+.vista.text-center .vista-text {
+  text-align: center;
+}
+.vista.text-right .vista-text {
+  text-align: right;
+}
+
+
+.vista-subtitle {
+  font-size: 1.125rem;
+  opacity: 0.8;
+  margin-bottom: 1.5rem;
+}
+
+.vista-image img {
+  width: 100%;
+}
+
+/* Responsive behavior */
+@media screen and (max-width: 768px) {
+  .vista-container {
+    flex-direction: column !important;
+    text-align: center;
+  }
+
+  .vista.reverse .vista-container {
+    flex-direction: column !important;
+  }
+
+  .vista-text,
+  .vista-image {
+    text-align: center;
+  }
+}
+
+
+/* Responsive */
+@media screen and (max-width: 768px) {
+  .vista-container {
+    flex-direction: column !important;
+    text-align: center;
+  }
+
+  .vista.reverse .vista-container {
+    flex-direction: column !important;
+  }
+}
+
+
 
 
 /* Base Animation Setup */
@@ -4574,6 +4702,7 @@ filter: brightness(90%);
 }
 
 
+
 /* Date Cell */
 .datepicker-day {
   cursor: pointer;
@@ -4837,6 +4966,30 @@ background-color: rgba(0, 0, 0, 0.2);
 .w-vw{ width: 100vw !important; }
 .min-w-vw { min-width: 100vw !important; }
 .min-h-vh { min-height: 100vh !important; }
+.max-h-vh { max-height: 100vh !important; }
+.w-100-vw { width: 100vw !important; }
+.w-90-vw { width: 90vw !important; }
+.w-80-vw { width: 80vw !important; }
+.w-70-vw { width: 70vw !important; }
+.w-60-vw { width: 60vw !important; }
+.w-50-vw { width: 50vw !important; }
+.w-40-vw { width: 40vw !important; }
+.w-30-vw { width: 30vw !important; }
+.w-20-vw { width: 20vw !important; }
+.w-10-vw { width: 10vw !important; }
+
+.min-w-10-vw { min-width: 10vw !important; }
+.min-w-20-vw { min-width: 20vw !important; }
+.min-w-30-vw { min-width: 30vw !important; }
+.min-w-40-vw { min-width: 40vw !important; }
+.min-w-50-vw { min-width: 50vw !important; }
+.min-w-60-vw { min-width: 60vw !important; }
+.min-w-70-vw { min-width: 70vw !important; }
+.min-w-80-vw { min-width: 80vw !important; }
+.min-w-90-vw { min-width: 90vw !important; }
+.min-w-100-vw { min-width: 100vw !important; }
+
+
 
 .width-10-p { width: 10% !important; }
 .width-20-p { width: 20% !important; }
@@ -5201,6 +5354,28 @@ background-color: rgba(0, 0, 0, 0.2);
 .height{height:var(--height)}
 .w-vw   { width: 100vw !important; }
 .h-vh   { height: 100vh !important; }
+.h-100-vh { height: 100vh !important; }
+.h-90-vh { height: 90vh !important; }
+.h-80-vh { height: 80vh !important; }
+.h-70-vh { height: 70vh !important; }
+.h-60-vh { height: 60vh !important; }
+.h-50-vh { height: 50vh !important; }
+.h-40-vh { height: 40vh !important; }
+.h-30-vh { height: 30vh !important; }
+.h-20-vh { height: 20vh !important; }
+.h-10-vh { height: 10vh !important; }
+
+.min-h-10-vh { min-height: 10vh !important; }
+.min-h-20-vh { min-height: 20vh !important; }
+.min-h-30-vh { min-height: 30vh !important; }
+.min-h-40-vh { min-height: 40vh !important; }
+.min-h-50-vh { min-height: 50vh !important; }
+.min-h-60-vh { min-height: 60vh !important; }
+.min-h-70-vh { min-height: 70vh !important; }
+.min-h-80-vh { min-height: 80vh !important; }
+.min-h-90-vh { min-height: 90vh !important; }
+.min-h-100-vh { min-height: 100vh !important; }
+
 .min-h-vh {min-height: 100vh !important;}
 .max-h-vh { max-height: 100vh !important; }
 

package/index.d.ts

@@ -49,5 +49,6 @@ export { default as ScrollInView } from "./ui/ScrollInView/ScrollInView";
 export { default as View } from "./ui/view/View";
 export { default as DatePicker } from "./ui/datepicker/DatePicker";
 export { default as Calendar } from "./ui/calendar/Calendar";
+export { default as Vista } from "./ui/vista/Vista";
 export { default as Cookie } from "./js/Cookie";
 export { FunGet } from "./js/Fun";

package/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = 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.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
-exports.FunGet = exports.Cookie = exports.Calendar = void 0;
+exports.FunGet = exports.Cookie = exports.Vista = exports.Calendar = 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");
@@ -107,6 +107,8 @@ var DatePicker_1 = require("./ui/datepicker/DatePicker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
 var Calendar_1 = require("./ui/calendar/Calendar");
 Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return __importDefault(Calendar_1).default; } });
+var Vista_1 = require("./ui/vista/Vista");
+Object.defineProperty(exports, "Vista", { enumerable: true, get: function () { return __importDefault(Vista_1).default; } });
 // js 
 var Cookie_1 = require("./js/Cookie");
 Object.defineProperty(exports, "Cookie", { enumerable: true, get: function () { return __importDefault(Cookie_1).default; } });

package/index.tsx

@@ -49,6 +49,7 @@ export { default as ScrollInView } from "./ui/ScrollInView/ScrollInView"
 export { default as View } from "./ui/view/View"
 export { default as DatePicker } from "./ui/datepicker/DatePicker"
 export { default as Calendar } from "./ui/calendar/Calendar"
+export { default as Vista } from "./ui/vista/Vista"
 
 // js 
 export { default as Cookie } from "./js/Cookie"

package/package.json

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