funuicss 3.7.2 → 3.7.4

package/css/fun.css

@@ -1653,6 +1653,195 @@ border-radius: var(--borderRadius);
   cursor: pointer;
 }
 
+/* AppBar Dropdown Styles */
+.nav_item {
+  position: relative;
+}
+
+.nav_item.has-dropdown .nav_link {
+  cursor: pointer;
+}
+
+.nav_link-arrow {
+  transition: transform 0.3s ease;
+  margin-left: 0.25rem;
+}
+
+.nav_item.dropdown-open .nav_link-arrow {
+  transform: rotate(180deg);
+}
+
+/* Dropdown Menu */
+.nav_dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: var(--page-bg);
+  border: var(--border);
+  border-radius: 0.5rem;
+  box-shadow: var(--card);
+  min-width: 200px;
+  z-index: 1000;
+  opacity: 0;
+  transform: translateY(-10px);
+  font-size: var(--minifiedFontSize);
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+
+.nav_item.dropdown-open .nav_dropdown-menu {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+}
+
+/* Dropdown Links */
+.nav_dropdown-menu .nav_item {
+  border-bottom: var(--border);
+}
+
+.nav_dropdown-menu .nav_item:last-child {
+  border-bottom: none;
+}
+
+.nav_dropdown-menu .nav_link {
+  display: block;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border-radius: 0;
+}
+
+.nav_dropdown-menu .nav_link:hover {
+  background: var(--lighter);
+  color: var(--primary) !important;
+}
+
+.nav_dropdown-menu .nav_link.active {
+  background: var(--primary100);
+  color: var(--primary);
+  font-weight: 500;
+}
+
+/* Nested Dropdowns */
+.nav_dropdown-menu .nav_dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-left: 0.25rem;
+}
+
+.nav_dropdown-menu .nav_item.has-dropdown .nav_link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Mobile Dropdown Styles */
+.nav_dropdown-mobile {
+  position: static !important;
+  box-shadow: none !important;
+  border: none !important;
+  background: var(--raiseOpaque) !important;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+  opacity: 1 !important;
+  transform: none !important;
+  visibility: visible !important;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.nav_item.dropdown-open .nav_dropdown-mobile {
+  max-height: 500px;
+}
+
+.nav_dropdown-mobile .nav_link {
+  padding: 0.5rem 1rem !important;
+}
+
+/* Mobile Menu */
+.nav_mobile-menu {
+  position: fixed;
+  top: var(--navHeight);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--raiseOpaque);
+  z-index: 999;
+  overflow-y: auto;
+  padding: 1rem;
+  border-top: var(--border);
+}
+
+.nav_mobile-menu .nav_links {
+  align-items: flex-start !important;
+}
+
+.nav_mobile-menu .nav_item {
+  width: 100%;
+}
+
+.nav_mobile-menu .nav_link {
+  width: 100%;
+  justify-content: space-between;
+  padding: 1rem !important;
+  border-bottom: var(--border);
+}
+
+/* Active Link Styles */
+.nav_link.active {
+  color: var(--primary) !important;
+  font-weight: 600;
+}
+
+/* Hover Effects */
+.nav_link:hover {
+  color: var(--primary) !important;
+}
+
+/* Icon Styles */
+.nav_link-icon {
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+}
+
+.nav_link:hover .nav_link-icon.prefix {
+  transform: translateX(-2px);
+}
+
+.nav_link:hover .nav_link-icon.suffix {
+  transform: translateX(2px);
+}
+
+/* Smooth Transitions */
+.nav_link,
+.nav_link-content,
+.nav_dropdown-menu {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Focus States */
+.nav_link:focus {
+  outline: 2px solid  var(--primary);
+  outline-offset: 2px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .nav_dropdown-menu {
+    position: static;
+    box-shadow: none;
+    border: none;
+    background: var(--raiseOpaque);
+    margin-left: 1rem;
+  }
+  
+  .nav_item.dropdown-open .nav_dropdown-menu {
+    max-height: 500px;
+  }
+}
+
 
 
 /* video */
@@ -1727,7 +1916,7 @@ border-radius: var(--borderRadius);
   line-height: 0;
   color: var(--text-color);
 }
-
+ 
 
 
 
@@ -2927,14 +3116,14 @@ select.input {
     padding-top: 1.3rem;
     padding-bottom: 0.5rem;
   }
-}
-
-.fileInput{
+}/* Enhanced File Upload Styles */
+.fileInput {
   position: relative;
   width: fit-content !important;
   cursor: pointer;
 }
-.filedInput{
+
+.filedInput {
   position: absolute;
   top: 0;
   left: 0;
@@ -2946,39 +3135,103 @@ select.input {
   z-index: 2;
 }
 
-
 ._upload_container {
-  border: 0.17rem dashed var(--borderColor);	
+  border: 0.17rem dashed var(--borderColor);
   border-radius: 16px;
   padding: var(--space-5);
   text-align: center;
-  transition: border-color 0.3s ease;
+  transition: all 0.3s ease;
   cursor: pointer;
   margin: auto;
   color: var(--text-color);
+  position: relative;
+  overflow: hidden;
 }
 
 ._upload_container:hover {
   border-color: var(--primary);
   background-color: var(--lighter);
-  /* color: var(--primary800); */
+}
+
+._upload_container.drag-over {
+  border-color: var(--primary);
+  background-color: var(--lighter);
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 ._upload_label {
   display: block;
   cursor: pointer;
+  position: relative;
+  z-index: 1;
 }
 
 ._upload_icon {
   font-size: 2.4rem;
   color: var(--primary);
   margin-bottom: 0.5rem;
+  transition: all 0.3s ease;
 }
 
 ._upload_input {
   display: none;
 }
 
+/* Drag and drop overlay */
+.drag-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--primary);
+  opacity: 0.1;
+  border-radius: 14px;
+  pointer-events: none;
+}
+
+/* File info display */
+.file-info {
+  margin-top: var(--space-3);
+  padding: var(--space-3);
+  background-color: var(--light);
+  border-radius: 8px;
+  border: 1px solid var(--borderColor);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  justify-content: center;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Status colors */
+._upload_container.success {
+  border-color: var(--success);
+}
+
+._upload_container.warning {
+  border-color: var(--warning);
+}
+
+._upload_container.danger {
+  border-color: var(--danger);
+}
+
+._upload_container.info {
+  border-color: var(--info);
+}
 
 .custom-select {
   position: relative; 

package/index.d.ts

@@ -55,6 +55,7 @@ export { default as Slider } from "./ui/slider/Slider";
 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 FileUpload } from "./ui/input/FileUpload";
 export { default as Cookie } from "./js/Cookie";
 export { useVariable, useAsset, useAssetType, useAssetValue, useAssets, useVariables, } from "./ui/theme/theme";
 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.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.useVariables = exports.useAssets = exports.useAssetValue = exports.useAssetType = exports.useAsset = exports.useVariable = exports.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
+exports.GoogleAnalytics = exports.FunGet = exports.useVariables = exports.useAssets = exports.useAssetValue = exports.useAssetType = exports.useAsset = exports.useVariable = exports.Cookie = exports.FileUpload = 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");
@@ -119,6 +119,8 @@ var ScrollToTop_1 = require("./ui/scrolltotop/ScrollToTop");
 Object.defineProperty(exports, "ScrollToTop", { enumerable: true, get: function () { return __importDefault(ScrollToTop_1).default; } });
 var Select_1 = require("./ui/select/Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });
+var FileUpload_1 = require("./ui/input/FileUpload");
+Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return __importDefault(FileUpload_1).default; } });
 // js 
 var Cookie_1 = require("./js/Cookie");
 Object.defineProperty(exports, "Cookie", { enumerable: true, get: function () { return __importDefault(Cookie_1).default; } });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.2",
+  "version": "3.7.4",
   "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/appbar/AppBar.d.ts

@@ -1,20 +1,50 @@
 import * as React from 'react';
+interface NavLink {
+    label: string;
+    href: string;
+    icon?: string;
+    iconPosition?: 'prefix' | 'suffix';
+    children?: NavLink[];
+    active?: boolean;
+    className?: string;
+}
 interface NavbarProps {
     fixedTop?: boolean;
     funcss?: string;
     padding?: string;
     fixedBottom?: boolean;
     justify?: string;
+    transparent?: boolean;
     children?: React.ReactNode;
     left?: React.ReactNode;
     center?: React.ReactNode;
     right?: React.ReactNode;
     sidebarTrigger?: React.ReactNode;
-    transparent?: boolean;
     sideBar?: number;
     hasSidebar?: boolean;
     sidebarOpen?: boolean;
     openSidebar?: () => void;
+    variant?: string;
+    leftLinks?: NavLink[] | string;
+    centerLinks?: NavLink[] | string;
+    rightLinks?: NavLink[] | string;
+    renderLink?: (link: NavLink, index: number) => React.ReactNode;
+    mobileMenuBreakpoint?: number;
+    logoType?: 'text' | 'image' | 'both' | 'none';
+    logoText?: string;
+    logoTextSize?: string;
+    logoTextColor?: string;
+    logoTextWeight?: string;
+    logoUrl?: string;
+    logoAlt?: string;
+    logoWidth?: string;
+    logoHeight?: string;
+    logoHref?: string;
+    onLogoClick?: () => void;
+    linkGap?: string;
+    linkPadding?: string;
+    activeLinkColor?: string;
+    dropdownArrow?: boolean;
 }
-export default function AppBar({ fixedTop, funcss, padding, fixedBottom, justify, left, center, right, sideBar, sidebarTrigger, transparent, hasSidebar, openSidebar, sidebarOpen }: NavbarProps): React.JSX.Element;
+export default function AppBar(localProps: NavbarProps): React.JSX.Element;
 export {};