funuicss 2.7.9 → 2.7.11

package/css/fun.css

@@ -222,6 +222,7 @@
 }
 
 
+
 /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
 ::-webkit-scrollbar {
   width: 10px;
@@ -1844,6 +1845,7 @@ button:disabled {
 }
 
 
+
 /* Typography */
 .baseColor, .text-base{
   color: var(--text-color) !important;}
@@ -1855,6 +1857,9 @@ body {
   background-color: var(--page-bg) !important;
   color: var(--text-color) !important;
 }
+.bg{
+  background-color: var(--page-bg) !important;
+}
 
 /* Font utilities with matching line heights */
 .text-xs {
@@ -1945,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);
@@ -1966,7 +1974,7 @@ body {
   line-height: 1.125rem;
 }
 
-.text-minified {
+.text-minified  , .text-md{
   font-size: var(--minifiedFontSize);
   line-height: 1rem;
 }
@@ -2392,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;
@@ -2596,7 +2606,7 @@ h6, .h6 {
 
 /*cards*/
 .card {
-background: var(--cardBg) !important;
+background: var(--cardBg);
 box-shadow: var(--card);
 transition: 0.3s;
 backdrop-filter: var(--raiseBackdrop) ;
@@ -2930,7 +2940,7 @@ color: var(--text-color);
 }
 
 .navline {
-  height: 3px;
+  height: 2px;
   background-color: var(--text-color);
   border-radius: 4rem !important;
   width: 100%;
@@ -2941,7 +2951,7 @@ color: var(--text-color);
 .navmiddle {
   width: 60%;
   align-self: flex-start;
-  background-color: var(--primary500);
+  background-color: var(--primary600);
 
 }
 
@@ -3280,6 +3290,8 @@ color: var(--text-color);
 }
 
 
+
+
 .avatar {
   display: flex;
   align-items: center;
@@ -3310,19 +3322,20 @@ color: var(--text-color);
   position: absolute;
   box-shadow: var(--card);
   transition: 0.5s;
-  z-index: 999; /* Higher to sit above everything */
+  z-index: 10; /* Higher to sit above everything */
   width: 100%;
   min-width: max-content !important;
   overflow: visible; /* allow overflow! */
   border-radius: 0.5rem;
-  background-color: var(--raiseOpaque) !important;
-  backdrop-filter: var(--raiseBackdrop) !important;
-  display: none;
+  background-color: var(--raiseThemes);
+  backdrop-filter: blur(2px) !important; 
   border: var(--border);
 }
 
 
 
+
+
 .dropup:hover .drop-menu {
   display: block;
   z-index: 1;
@@ -3354,6 +3367,7 @@ color: var(--text-color);
 }
 
 
+
 /*inputs*/
 .input {
   padding: var(--inputPadding);
@@ -3902,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 */
@@ -4567,13 +4701,10 @@ filter: brightness(90%);
   gap: 0.25rem;
 }
 
+
+
 /* Date Cell */
 .datepicker-day {
-  height: 2.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 6px;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
@@ -4589,7 +4720,7 @@ filter: brightness(90%);
 }
 
 .datepicker-day.selected {
-  background-color: var(--primary);
+  background-color: var(--primary) !important;
   color: var(--primary50);
 }
 
@@ -4601,6 +4732,7 @@ filter: brightness(90%);
 .datepicker-selected{display: flex;justify-content: space-between;align-items: center;}
 
 
+
 .calendar {
   width: 100%;
   /* border: var(--border); */
@@ -4643,29 +4775,36 @@ filter: brightness(90%);
   min-height: 80px;
   background-color: var(--lighter);
   position: relative;
-  border-radius: 1rem;
+  border-radius: 1rem !important;
   padding: 5px;
+  border: 0.1rem solid transparent;
+}
+.calendar-cell:hover{border: var(--border);}
+.calendar-cell.empty{
+  background-color: transparent !important;
+  border: none !important;
 }
 
 .day-box {
   position: relative;
 }
 .day-number {
-  font-weight: 500;
-  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.8;
 }
+
 .activities {
   margin-top: 4px;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 0.2rem;
 }
 .activity-tag {
   font-size: 0.75rem;
-  background: var(--lighter);
+  background: var(--page-bg);
   font-weight: 500;
   padding: 2px 4px;
-  border-radius: 3px;
+  border-radius: 0.5rem;
   line-height: 1 !important;
   cursor: pointer;
 }
@@ -4675,6 +4814,34 @@ filter: brightness(90%);
   right: 4px;
 }
 
+.calendar-cell.today .day-number{
+  color: var(--primary) !important;
+}
+@media (max-width: 768px) {
+  .calendar-cell {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+    min-height: 2.5rem !important;
+    border-radius: 50% !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+  .calendar-cell.selected{ 
+    background-color: var(--primary) !important;
+    color: var(--primary50) !important;
+  }
+  .activity-tag{
+   margin-top: 0.5rem;
+   cursor: pointer;
+   padding: 0.5rem;
+  }
+
+}
+
+
 /* Loader */
 .funLoader{
   color: var(--primary);
@@ -4799,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; }
@@ -4820,7 +5011,7 @@ background-color: rgba(0, 0, 0, 0.2);
 .w-70-p { width: 70% !important; }
 .w-80-p { width: 80% !important; }
 .w-90-p { width: 90% !important; }
-.w-100-p { width: 100% !important; }
+.w-100-p , .w-full { width: 100% !important; }
 
 
 .w-10 { width: 0.625rem !important; }
@@ -5163,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; }
 
@@ -5237,7 +5450,7 @@ background-color: rgba(0, 0, 0, 0.2);
 .h-70-p { height: 70% !important; }
 .h-80-p { height: 80% !important; }
 .h-90-p { height: 90% !important; }
-.h-100-p { height: 100% !important; }
+.h-100-p , .h-full { height: 100% !important; }
 
 
 .height-10-p {

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

@@ -44,11 +44,12 @@ export { default as Video } from "./ui/video/Video"
 export { default as Carousel } from "./ui/carousel/Carousel"
 export { default as RichText } from "./ui/richtext/RichText"
 export { default as Flex } from "./ui/flex/Flex"
-export { default as Accordion } from "./ui/accordion/Accordion"
+export { default as Accordion} from "./ui/accordion/Accordion"
 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.9",
+  "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",