funuicss 2.7.6 → 2.7.8

package/css/fun.css

@@ -2770,6 +2770,8 @@ color: var(--text-color);
   color: var(--text-color);
 }
 
+
+
  .play-button {
       display: flex;
       align-items: center;
@@ -3149,6 +3151,8 @@ color: var(--text-color);
 }
 
 
+
+
 .alert-container > .alert{
   box-shadow: var(--card);
   background: var(--cardBg);
@@ -3282,7 +3286,6 @@ color: var(--text-color);
   justify-content: center;
   border-radius: 50%;
   overflow: hidden;
-  font-weight: bold;
   background-color: var(--raiseOpaque);
  backdrop-filter: var(--raiseBackdrop);
  color: var(--text-color);
@@ -3296,8 +3299,8 @@ color: var(--text-color);
   width:fit-content;
   z-index: 1;
 }
-.dropdown .drop-menu { top: 101%; }
-.dropup .drop-menu { bottom: 101%; }
+.dropdown .drop-menu { top: 105%; }
+.dropup .drop-menu { bottom: 105%; }
 .dropdown.left .drop-menu { left: 0; }
 .dropdown.right .drop-menu { right: 0; }
 .dropup.left .drop-menu { left: 0; }
@@ -3315,6 +3318,7 @@ color: var(--text-color);
   background-color: var(--raiseOpaque) !important;
   backdrop-filter: var(--raiseBackdrop) !important;
   display: none;
+  border: var(--border);
 }
 
 
@@ -3396,8 +3400,8 @@ color: var(--text-color);
 
 ._upload_container:hover {
   border-color: var(--primary);
-  background-color: var(--primary50);
-  color: var(--primary800);
+  background-color: var(--lighter);
+  /* color: var(--primary800); */
 }
 
 ._upload_label {
@@ -3857,8 +3861,12 @@ width: 100%;
 }
 
 .accordion-item {
-border-bottom: 1px solid var(--borderColor);
-padding: 0.5rem 0;
+margin: 0.5rem 0;
+border: var(--border);
+background-color: var(--lighter);
+border-radius: 1rem;
+padding: 0.5rem 1rem;
+
 }
 
 .accordion-header {
@@ -3869,15 +3877,23 @@ display: flex;
 justify-content: space-between;
 gap: 1rem;
 align-items: center;
-padding: 0.5rem 0;
+border-radius: 0.5rem;
 cursor: pointer;
 }
-
+.accordion-rotated {
+  display: inline-block;
+  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
+  transform: rotate(180deg);
+}
+.accordion-header .iconClass {
+  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
+  /* Optional: set transform: rotate(0deg); for closed state if needed */
+}
 
 .accordion-content {
 max-height: 0;
 overflow: hidden;
-transition: max-height 0.5s ease-in-out, opacity 0.3s ease;
+transition: max-height 1s ease-in-out, opacity 0.3s ease;
 opacity: 0;
 }
 
@@ -3887,9 +3903,6 @@ opacity: 0.9;
 }
 
 
-.accordion-inner {
-padding: 0.5rem 0;
-}
 
 /* Base Animation Setup */
 .animated {
@@ -4502,6 +4515,93 @@ filter: brightness(90%);
 
 
 
+/* Container */
+.datepicker {
+  background-color: var(--raiseOpaque);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  width: 100%;
+}
+
+/* Header */
+.datepicker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.datepicker-header button {
+  background-color: var(--lighter);
+  border: none;
+  padding: 0.4rem 0.6rem;
+  border-radius: 50%;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.datepicker-header button:hover {
+  background-color: var(--lighter);
+}
+
+.datepicker-header span {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+/* Week Days */
+.datepicker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--primary);
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+/* Dates Grid */
+.datepicker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  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;
+}
+
+.datepicker-day:hover {
+  background-color: var(--primary100);
+  color: var(--primary);
+}
+
+.datepicker-day.in-range {
+  background-color: var(--lighter);
+  color: var(--text-color);
+}
+
+.datepicker-day.selected {
+  background-color: var(--primary);
+  color: var(--primary50);
+}
+
+.datepicker-day.empty {
+  cursor: default;
+  background: transparent;
+}
+
+.datepicker-selected{display: flex;justify-content: space-between;align-items: center;}
+
+
+
 /* Loader */
 .funLoader{
   color: var(--primary);

package/index.d.ts

@@ -45,5 +45,8 @@ 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 ScrollInView } from "./ui/ScrollInView/ScrollInView";
+export { default as View } from "./ui/view/View";
+export { default as DatePicker } from "./ui/datepicker/DatePicker";
 export { default as Cookie } from "./js/Cookie";
 export { FunGet } from "./js/Fun";

package/index.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FunGet = exports.Cookie = 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.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 = 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");
@@ -98,6 +99,12 @@ var Flex_1 = require("./ui/flex/Flex");
 Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return __importDefault(Flex_1).default; } });
 var Accordion_1 = require("./ui/accordion/Accordion");
 Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return __importDefault(Accordion_1).default; } });
+var ScrollInView_1 = require("./ui/ScrollInView/ScrollInView");
+Object.defineProperty(exports, "ScrollInView", { enumerable: true, get: function () { return __importDefault(ScrollInView_1).default; } });
+var View_1 = require("./ui/view/View");
+Object.defineProperty(exports, "View", { enumerable: true, get: function () { return __importDefault(View_1).default; } });
+var DatePicker_1 = require("./ui/datepicker/DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_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

@@ -45,6 +45,9 @@ 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 ScrollInView } from "./ui/ScrollInView/ScrollInView"
+export { default as View } from "./ui/view/View"
+export { default as DatePicker } from "./ui/datepicker/DatePicker"
 
 // js 
 export { default as Cookie } from "./js/Cookie"

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.7.6",
+  "version": "2.7.8",
   "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",
@@ -43,12 +43,15 @@
   "license": "MIT",
   "dependencies": {
     "aos": "^2.3.4",
+    "dayjs": "^1.11.13",
+    "framer-motion": "^12.23.6",
     "hls.js": "^1.6.5",
     "next": "^13.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-easy-export": "^1.0.1",
     "react-icons": "^5.0.1",
+    "react-intersection-observer": "^9.16.0",
     "react-quilljs": "^2.0.5",
     "recharts": "^2.15.3",
     "tinycolor2": "^1.6.0"