@moontra/moonui-pro 3.3.16 → 3.3.18

package/dist/index.d.ts

@@ -3968,7 +3968,7 @@ interface NavbarConfig {
         text?: string;
         hover?: string;
     };
-    variant?: "default" | "floating" | "minimal" | "transparent";
+    variant?: "default" | "floating" | "floating-centered" | "minimal" | "transparent";
     size?: "sm" | "md" | "lg";
     blur?: boolean;
     shadow?: boolean;

package/dist/index.mjs

@@ -6899,7 +6899,7 @@ var MoonUISelectPro = SelectPrimitive.Root;
 MoonUISelectPro.displayName = "MoonUISelectPro";
 var MoonUISelectGroupPro = SelectPrimitive.Group;
 var MoonUISelectValuePro = SelectPrimitive.Value;
-var MoonUISelectTriggerPro = React71.forwardRef(({ className, children, variant = "standard", size: size4 = "md", error, success, loading, leftIcon, rightIcon, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MoonUISelectTriggerPro = React71.forwardRef(({ className, children, variant = "standard", size: size4 = "md", error, success, loading, leftIcon, rightIcon, clearable, onClear, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -6917,10 +6917,10 @@ var MoonUISelectTriggerPro = React71.forwardRef(({ className, children, variant
       size4 === "md" && "h-10 text-sm px-3",
       size4 === "lg" && "h-12 text-base px-4",
       /* Visual variants */
-      variant === "standard" && "border border-gray-300 dark:border-gray-700 bg-background dark:bg-gray-900 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/50 focus-visible:border-primary dark:focus-visible:border-primary",
-      variant === "outline" && "border border-gray-300 dark:border-gray-700 bg-transparent hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/50 focus-visible:border-primary dark:focus-visible:border-primary",
-      variant === "ghost" && "border-none bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/50",
-      variant === "underline" && "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary dark:focus-visible:border-primary",
+      variant === "standard" && "border border-gray-300 dark:border-gray-700 bg-background dark:bg-gray-800/80 dark:shadow-inner dark:shadow-gray-950/10 dark:text-gray-200 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80",
+      variant === "outline" && "border border-gray-300 dark:border-gray-700 bg-transparent dark:text-gray-200 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80",
+      variant === "ghost" && "border-none bg-gray-100 dark:bg-gray-800 dark:shadow-inner dark:shadow-gray-950/10 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20",
+      variant === "underline" && "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 dark:text-gray-200 dark:bg-transparent hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary dark:focus-visible:border-primary/80",
       className
     ),
     ...props,
@@ -6936,6 +6936,19 @@ var MoonUISelectTriggerPro = React71.forwardRef(({ className, children, variant
           /* @__PURE__ */ jsx("span", { className: "text-muted-foreground dark:text-gray-400", children: "Loading..." })
         ] }) : children
       ] }),
+      !loading && clearable && onClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            onClear();
+          },
+          className: "flex items-center justify-center opacity-60 hover:opacity-100 transition-opacity mr-1",
+          "aria-label": "Clear selection",
+          children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+        }
+      ),
       !loading && /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: rightIcon ? /* @__PURE__ */ jsx("span", { className: "opacity-60", children: rightIcon }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-60 transition-transform duration-200 ease-out group-data-[state=open]:rotate-180" }) })
     ]
   }
@@ -6995,7 +7008,7 @@ var MoonUISelectContentPro = React71.forwardRef(({ className, children, position
         [
           "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
           "rounded-md border border-gray-200 dark:border-gray-700",
-          "bg-white dark:bg-gray-900 text-foreground",
+          "bg-background dark:bg-gray-800/80 backdrop-blur-sm text-foreground dark:text-gray-200",
           "shadow-lg dark:shadow-gray-900/20",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -7070,7 +7083,10 @@ var MoonUISelectItemPro = React71.forwardRef(({ className, children, variant = "
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all duration-150",
+      "moonui-theme",
+      "relative flex w-full cursor-default select-none items-center rounded-sm outline-none",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "transition-all duration-150",
       /* Size variants */
       size4 === "sm" && "py-1 pl-7 pr-2 text-xs",
       size4 === "md" && "py-1.5 pl-8 pr-2 text-sm",
@@ -79161,9 +79177,6 @@ function NavbarInternal({
     ] }) })
   ] });
   const getHeight = () => {
-    if (isMinimal && minimalConfig?.heightOnScroll) {
-      return minimalConfig.heightOnScroll;
-    }
     switch (size4) {
       case "sm":
         return "h-14";
@@ -79173,15 +79186,12 @@ function NavbarInternal({
         return "h-16";
     }
   };
-  const shouldHideInMinimal = (element) => {
-    return isMinimal && minimalConfig?.hideElements?.includes(element);
-  };
   const navClasses = cn(
-    "moonui-pro w-full transition-all",
-    `duration-${minimalConfig?.animationDuration || 300}`,
+    "moonui-pro w-full transition-all duration-300 ease-in-out",
     // Base variant styles
     variant === "default" && "border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
     variant === "floating" && "mx-4 mt-4 rounded-lg border bg-background/95 backdrop-blur shadow-lg",
+    variant === "floating-centered" && "mx-auto my-4 max-w-5xl rounded-2xl border border-border/40 bg-background/70 backdrop-blur-xl shadow-lg shadow-black/5 dark:shadow-black/20 px-6",
     variant === "minimal" && "bg-background",
     variant === "transparent" && "bg-transparent",
     // Sticky behavior
@@ -79190,9 +79200,6 @@ function NavbarInternal({
     scrolled && sticky && variant !== "transparent" && "shadow-sm",
     scrolled && variant === "transparent" && "bg-background/95 backdrop-blur border-b",
     scrollBehavior === "hide" && hidden && "-translate-y-full",
-    // Minimal mode styles
-    scrollBehavior === "minimal" && isMinimal && "shadow-md border-b",
-    scrollBehavior === "minimal" && isMinimal && minimalConfig?.centerOnScroll && "px-8",
     // Glass effect
     glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
     blur2 && "backdrop-blur-md",
@@ -79209,23 +79216,18 @@ function NavbarInternal({
         "div",
         {
           className: cn(
-            "flex items-center",
+            "flex items-center transition-[height] duration-300 ease-in-out",
             getHeight(),
             fullWidth ? "w-full px-4 sm:px-6 lg:px-8" : maxWidth === "sm" && "container max-w-screen-sm" || maxWidth === "md" && "container max-w-screen-md" || maxWidth === "lg" && "container max-w-screen-lg" || maxWidth === "xl" && "container max-w-screen-xl" || maxWidth === "2xl" && "container max-w-screen-2xl" || maxWidth === "full" && "w-full px-4 sm:px-6 lg:px-8"
           ),
           children: [
             branding && /* @__PURE__ */ jsxs(
-              motion.div,
+              "div",
               {
                 className: cn(
                   "flex items-center gap-2",
-                  logoPosition === "center" && !isMobile ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
+                  logoPosition === "center" && !isMobile && variant !== "floating-centered" ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
                 ),
-                animate: {
-                  scale: isMinimal ? 0.9 : 1,
-                  opacity: shouldHideInMinimal("logo-text") ? 0.8 : 1
-                },
-                transition: { duration: minimalConfig?.animationDuration ? minimalConfig.animationDuration / 1e3 : 0.3 },
                 children: [
                   logoPosition === "left" && mobileMenuPosition === "left" && /* @__PURE__ */ jsx(MobileMenu, {}),
                   /* @__PURE__ */ jsxs(
@@ -79241,18 +79243,7 @@ function NavbarInternal({
                       className: "flex items-center gap-2",
                       children: [
                         branding.logo,
-                        branding.title && !isMobile && !shouldHideInMinimal("logo-text") && /* @__PURE__ */ jsx(
-                          motion.span,
-                          {
-                            className: "font-semibold text-lg",
-                            animate: {
-                              opacity: shouldHideInMinimal("logo-text") ? 0 : 1,
-                              width: shouldHideInMinimal("logo-text") ? 0 : "auto"
-                            },
-                            transition: { duration: 0.3 },
-                            children: branding.title
-                          }
-                        )
+                        branding.title && !isMobile && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
                       ]
                     }
                   )
@@ -79264,12 +79255,13 @@ function NavbarInternal({
               {
                 className: cn(
                   "hidden md:flex",
-                  navItemsPosition === "center" && "flex-1 justify-center mx-4",
+                  navItemsPosition === "center" && variant !== "floating-centered" && "flex-1 justify-center mx-4",
+                  navItemsPosition === "center" && variant === "floating-centered" && "flex-1 justify-center",
                   navItemsPosition === "right" && "ml-auto",
                   navItemsPosition === "left" && "ml-4",
                   // Keep position consistent in minimal mode unless centerOnScroll is enabled
                   isMinimal && minimalConfig?.centerOnScroll && navItemsPosition !== "center" && "flex-1 justify-center",
-                  navItemsPosition === "center" && "absolute left-1/2 transform -translate-x-1/2"
+                  navItemsPosition === "center" && variant !== "floating-centered" && "absolute left-1/2 transform -translate-x-1/2"
                 ),
                 children: /* @__PURE__ */ jsx(NavigationMenuList2, { children: sections.map((section) => /* @__PURE__ */ jsx(React71__default.Fragment, { children: section.items.map((item) => {
                   const hasChildren = item.items && item.items.length > 0;
@@ -79339,7 +79331,7 @@ function NavbarInternal({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
-              showSearch && !shouldHideInMinimal("search") && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
+              showSearch && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
                 MoonUIButtonPro,
                 {
                   variant: "ghost",
@@ -79587,7 +79579,7 @@ function NavbarInternal({
                   }
                 )
               ] }),
-              cta && !shouldHideInMinimal("cta") && /* @__PURE__ */ jsx(
+              cta && /* @__PURE__ */ jsx(
                 MoonUIButtonPro,
                 {
                   variant: cta.variant || "primary",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "3.3.16",
+    "version": "3.3.18",
     "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
     "type": "module",
     "main": "dist/index.mjs",