@moontra/moonui-pro 3.4.20 → 3.4.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -79544,23 +79544,608 @@ function NavbarInternal({
79544
79544
  framerScroll.isScrolled ? "border-b bg-background/80 backdrop-blur-xl shadow-lg" : "border-b border-transparent bg-background/95 backdrop-blur"
79545
79545
  ) : navClasses;
79546
79546
  return /* @__PURE__ */ jsxs(Fragment, { children: [
79547
- /* @__PURE__ */ jsxs(NavWrapper, { ref: navRef, className: floatingClasses, ...navMotionProps, children: [
79548
- variant === "floating-auto-hide" || variant === "floating-sticky" ? (
79549
- // Floating variants için iki katmanlı yapı (header.tsx pattern)
79550
- // IMPORTANT: container class yerine w-full kullan (Tailwind container max-width getiriyor)
79551
- /* @__PURE__ */ jsx(
79552
- "div",
79553
- {
79554
- className: cn(
79555
- "transition-all duration-300",
79556
- framerScroll.isScrolled ? "max-w-6xl mx-auto px-2 sm:px-3 lg:px-4" : "w-full px-2 sm:px-3 lg:px-4"
79557
- ),
79558
- children: /* @__PURE__ */ jsxs(
79547
+ /* @__PURE__ */ jsxs(
79548
+ NavWrapper,
79549
+ {
79550
+ ref: navRef,
79551
+ className: floatingClasses,
79552
+ ...navMotionProps,
79553
+ children: [
79554
+ variant === "floating-auto-hide" || variant === "floating-sticky" ? (
79555
+ // Floating variants için iki katmanlı yapı (header.tsx pattern)
79556
+ // IMPORTANT: container class yerine w-full kullan (Tailwind container max-width getiriyor)
79557
+ /* @__PURE__ */ jsx(
79558
+ "div",
79559
+ {
79560
+ className: cn(
79561
+ "transition-all duration-300",
79562
+ framerScroll.isScrolled ? "max-w-6xl mx-auto px-2 sm:px-3 lg:px-4" : "w-full px-2 sm:px-3 lg:px-4"
79563
+ ),
79564
+ children: /* @__PURE__ */ jsxs(
79565
+ "div",
79566
+ {
79567
+ className: cn(
79568
+ "flex items-center justify-between transition-all duration-300",
79569
+ getHeight(framerScroll.isScrolled)
79570
+ ),
79571
+ children: [
79572
+ branding && /* @__PURE__ */ jsxs(
79573
+ "div",
79574
+ {
79575
+ className: cn(
79576
+ "flex items-center gap-2",
79577
+ logoPosition === "center" && !isMobile ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
79578
+ ),
79579
+ children: [
79580
+ logoPosition === "left" && mobileMenuPosition === "left" && /* @__PURE__ */ jsx(MobileMenu, {}),
79581
+ /* @__PURE__ */ jsxs(
79582
+ "a",
79583
+ {
79584
+ href: branding.href || "/",
79585
+ onClick: (e) => {
79586
+ if (branding.href && onNavigate) {
79587
+ e.preventDefault();
79588
+ onNavigate(branding.href);
79589
+ }
79590
+ },
79591
+ className: "flex items-center gap-2",
79592
+ children: [
79593
+ /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
79594
+ motion.div,
79595
+ {
79596
+ initial: {
79597
+ opacity: 0,
79598
+ scale: 0.9
79599
+ },
79600
+ animate: {
79601
+ opacity: 1,
79602
+ scale: 1
79603
+ },
79604
+ exit: {
79605
+ opacity: 0,
79606
+ scale: 0.9
79607
+ },
79608
+ transition: {
79609
+ duration: 0.2,
79610
+ ease: "easeInOut"
79611
+ },
79612
+ children: getActiveLogo()
79613
+ },
79614
+ `logo-${framerScroll.isScrolled ? "scrolled" : "default"}-${isDarkMode ? "dark" : "light"}`
79615
+ ) }),
79616
+ /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: branding.title && !isMobile && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
79617
+ motion.span,
79618
+ {
79619
+ className: cn(
79620
+ "font-semibold overflow-hidden",
79621
+ getSizeClasses().logoText
79622
+ ),
79623
+ initial: {
79624
+ opacity: 0,
79625
+ width: 0
79626
+ },
79627
+ animate: {
79628
+ opacity: 1,
79629
+ width: "auto"
79630
+ },
79631
+ exit: {
79632
+ opacity: 0,
79633
+ width: 0
79634
+ },
79635
+ transition: {
79636
+ duration: 0.2,
79637
+ ease: "easeInOut"
79638
+ },
79639
+ children: branding.title
79640
+ },
79641
+ "logo-text"
79642
+ ) })
79643
+ ]
79644
+ }
79645
+ )
79646
+ ]
79647
+ }
79648
+ ),
79649
+ !isMobile && !hideNavItems && /* @__PURE__ */ jsx(
79650
+ NavigationMenu2,
79651
+ {
79652
+ className: cn(
79653
+ "hidden md:flex",
79654
+ // Overflow handling - minimal için otomatik expand, diğerleri user tercih
79655
+ autoExpand || !isFloatingVariant && variant === "minimal" ? "flex-nowrap" : "flex-wrap overflow-x-auto scrollbar-hide scroll-smooth",
79656
+ // Positioning - floating variants
79657
+ navItemsPosition === "center" && "flex-1 justify-center mx-4",
79658
+ navItemsPosition === "right" && "ml-auto",
79659
+ navItemsPosition === "left" && "ml-4",
79660
+ // Keep position consistent in minimal mode unless centerOnScroll is enabled
79661
+ isMinimal && minimalConfig?.centerOnScroll && navItemsPosition !== "center" && "flex-1 justify-center",
79662
+ navItemsPosition === "center" && "absolute left-1/2 transform -translate-x-1/2"
79663
+ ),
79664
+ children: /* @__PURE__ */ jsx(NavigationMenuList2, { children: sections.map((section) => /* @__PURE__ */ jsx(React71__default.Fragment, { children: section.items.map((item) => {
79665
+ const hasChildren = item.items && item.items.length > 0;
79666
+ const isActive2 = item.href === activePath;
79667
+ if (hasChildren) {
79668
+ return /* @__PURE__ */ jsxs(
79669
+ NavigationMenuItem2,
79670
+ {
79671
+ children: [
79672
+ /* @__PURE__ */ jsx(
79673
+ NavigationMenuTrigger2,
79674
+ {
79675
+ className: cn(
79676
+ isActive2 && "bg-accent text-accent-foreground",
79677
+ item.disabled && "opacity-50 cursor-not-allowed"
79678
+ ),
79679
+ disabled: item.disabled,
79680
+ children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
79681
+ item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
79682
+ item.title
79683
+ ] })
79684
+ }
79685
+ ),
79686
+ /* @__PURE__ */ jsx(NavigationMenuContent2, { children: item.items && renderMegaMenuContent(
79687
+ item.items
79688
+ ) })
79689
+ ]
79690
+ },
79691
+ item.id
79692
+ );
79693
+ }
79694
+ return /* @__PURE__ */ jsx(
79695
+ NavigationMenuItem2,
79696
+ {
79697
+ children: /* @__PURE__ */ jsxs(
79698
+ NavigationMenuLink2,
79699
+ {
79700
+ className: cn(
79701
+ navigationMenuTriggerStyle(),
79702
+ "cursor-pointer",
79703
+ getSizeClasses().text,
79704
+ getSizeClasses().padding,
79705
+ isActive2 && "bg-accent text-accent-foreground",
79706
+ item.disabled && "opacity-50 cursor-not-allowed"
79707
+ ),
79708
+ onClick: () => !item.disabled && handleItemClick(
79709
+ item
79710
+ ),
79711
+ children: [
79712
+ /* @__PURE__ */ jsxs(
79713
+ "span",
79714
+ {
79715
+ className: cn(
79716
+ "flex items-center",
79717
+ getSizeClasses().gap
79718
+ ),
79719
+ children: [
79720
+ item.icon && /* @__PURE__ */ jsx(
79721
+ "span",
79722
+ {
79723
+ className: getSizeClasses().iconSize,
79724
+ children: item.icon
79725
+ }
79726
+ ),
79727
+ item.title
79728
+ ]
79729
+ }
79730
+ ),
79731
+ item.badge && /* @__PURE__ */ jsx(
79732
+ MoonUIBadgePro,
79733
+ {
79734
+ variant: item.badgeVariant || "secondary",
79735
+ className: "ml-2",
79736
+ children: item.badge
79737
+ }
79738
+ )
79739
+ ]
79740
+ }
79741
+ )
79742
+ },
79743
+ item.id
79744
+ );
79745
+ }) }, section.id)) })
79746
+ }
79747
+ ),
79748
+ /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1 sm:gap-2", children: [
79749
+ showSearch && !framerScroll.isScrolled && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
79750
+ MoonUIButtonPro,
79751
+ {
79752
+ variant: "ghost",
79753
+ size: "icon",
79754
+ onClick: () => setIsCommandOpen(true),
79755
+ children: /* @__PURE__ */ jsx(Search, { className: "h-5 w-5" })
79756
+ }
79757
+ ) : /* @__PURE__ */ jsxs("div", { className: "relative", children: [
79758
+ /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
79759
+ /* @__PURE__ */ jsx(
79760
+ MoonUIInputPro,
79761
+ {
79762
+ type: "search",
79763
+ placeholder: searchPlaceholder,
79764
+ className: "w-64 pl-9 pr-4 h-9 cursor-pointer",
79765
+ value: searchValue,
79766
+ onChange: (e) => handleSearch(
79767
+ e.target.value
79768
+ ),
79769
+ onClick: () => {
79770
+ if (enableCommandAI) {
79771
+ setIsCommandOpen(
79772
+ true
79773
+ );
79774
+ onCommandAIOpen?.();
79775
+ }
79776
+ },
79777
+ readOnly: enableCommandAI
79778
+ }
79779
+ ),
79780
+ (keyboardShortcuts || enableCommandAI) && /* @__PURE__ */ jsx("kbd", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex", children: enableCommandAI ? commandAIShortcut : /* @__PURE__ */ jsxs(Fragment, { children: [
79781
+ /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
79782
+ "K"
79783
+ ] }) })
79784
+ ] }) }),
79785
+ showThemeToggle && (themeToggleVariant === "button" ? /* @__PURE__ */ jsx(
79786
+ motion.div,
79787
+ {
79788
+ whileTap: { scale: 0.95 },
79789
+ className: "relative",
79790
+ children: /* @__PURE__ */ jsx(
79791
+ MoonUIButtonPro,
79792
+ {
79793
+ variant: "ghost",
79794
+ size: getSizeClasses().buttonSize,
79795
+ onClick: () => {
79796
+ const newTheme = currentTheme === "dark" ? "light" : "dark";
79797
+ setCurrentTheme(newTheme);
79798
+ onThemeChange?.(newTheme);
79799
+ if (typeof window !== "undefined") {
79800
+ const root = window.document.documentElement;
79801
+ root.classList.remove(
79802
+ "light",
79803
+ "dark"
79804
+ );
79805
+ root.classList.add(
79806
+ newTheme
79807
+ );
79808
+ }
79809
+ },
79810
+ className: "relative overflow-hidden",
79811
+ children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: currentTheme === "dark" ? /* @__PURE__ */ jsx(
79812
+ motion.div,
79813
+ {
79814
+ initial: {
79815
+ y: -20,
79816
+ opacity: 0
79817
+ },
79818
+ animate: {
79819
+ y: 0,
79820
+ opacity: 1
79821
+ },
79822
+ exit: {
79823
+ y: 20,
79824
+ opacity: 0
79825
+ },
79826
+ transition: {
79827
+ duration: 0.2
79828
+ },
79829
+ children: /* @__PURE__ */ jsx(
79830
+ Moon,
79831
+ {
79832
+ className: getSizeClasses().iconSize
79833
+ }
79834
+ )
79835
+ },
79836
+ "moon"
79837
+ ) : /* @__PURE__ */ jsx(
79838
+ motion.div,
79839
+ {
79840
+ initial: {
79841
+ y: -20,
79842
+ opacity: 0,
79843
+ rotate: -90
79844
+ },
79845
+ animate: {
79846
+ y: 0,
79847
+ opacity: 1,
79848
+ rotate: 0
79849
+ },
79850
+ exit: {
79851
+ y: 20,
79852
+ opacity: 0,
79853
+ rotate: 90
79854
+ },
79855
+ transition: {
79856
+ duration: 0.2
79857
+ },
79858
+ children: /* @__PURE__ */ jsx(
79859
+ Sun,
79860
+ {
79861
+ className: getSizeClasses().iconSize
79862
+ }
79863
+ )
79864
+ },
79865
+ "sun"
79866
+ ) })
79867
+ }
79868
+ )
79869
+ }
79870
+ ) : /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
79871
+ /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
79872
+ MoonUIButtonPro,
79873
+ {
79874
+ variant: "ghost",
79875
+ size: "icon",
79876
+ children: [
79877
+ currentTheme === "light" && /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5" }),
79878
+ currentTheme === "dark" && /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5" }),
79879
+ currentTheme === "system" && /* @__PURE__ */ jsx(Monitor, { className: "h-5 w-5" })
79880
+ ]
79881
+ }
79882
+ ) }),
79883
+ /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
79884
+ /* @__PURE__ */ jsxs(
79885
+ MoonUIDropdownMenuItemPro,
79886
+ {
79887
+ onClick: () => {
79888
+ setCurrentTheme(
79889
+ "light"
79890
+ );
79891
+ onThemeChange?.(
79892
+ "light"
79893
+ );
79894
+ },
79895
+ children: [
79896
+ /* @__PURE__ */ jsx(Sun, { className: "mr-2 h-4 w-4" }),
79897
+ "Light"
79898
+ ]
79899
+ }
79900
+ ),
79901
+ /* @__PURE__ */ jsxs(
79902
+ MoonUIDropdownMenuItemPro,
79903
+ {
79904
+ onClick: () => {
79905
+ setCurrentTheme("dark");
79906
+ onThemeChange?.("dark");
79907
+ },
79908
+ children: [
79909
+ /* @__PURE__ */ jsx(Moon, { className: "mr-2 h-4 w-4" }),
79910
+ "Dark"
79911
+ ]
79912
+ }
79913
+ ),
79914
+ /* @__PURE__ */ jsxs(
79915
+ MoonUIDropdownMenuItemPro,
79916
+ {
79917
+ onClick: () => {
79918
+ setCurrentTheme(
79919
+ "system"
79920
+ );
79921
+ onThemeChange?.(
79922
+ "system"
79923
+ );
79924
+ },
79925
+ children: [
79926
+ /* @__PURE__ */ jsx(Monitor, { className: "mr-2 h-4 w-4" }),
79927
+ "System"
79928
+ ]
79929
+ }
79930
+ )
79931
+ ] })
79932
+ ] })),
79933
+ notifications && !framerScroll.isScrolled && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
79934
+ /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
79935
+ MoonUIButtonPro,
79936
+ {
79937
+ variant: "ghost",
79938
+ size: "icon",
79939
+ className: "relative",
79940
+ children: [
79941
+ /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
79942
+ notifications.count && notifications.count > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 min-w-[18px] h-[18px] rounded-full bg-red-500 text-[11px] font-medium text-white flex items-center justify-center px-1", children: notifications.count > 9 ? "9+" : notifications.count })
79943
+ ]
79944
+ }
79945
+ ) }),
79946
+ /* @__PURE__ */ jsxs(
79947
+ MoonUIDropdownMenuContentPro,
79948
+ {
79949
+ align: "end",
79950
+ className: "w-[380px] p-0",
79951
+ sideOffset: 8,
79952
+ children: [
79953
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [
79954
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
79955
+ /* @__PURE__ */ jsx("h4", { className: "text-base font-semibold", children: "Notifications" }),
79956
+ notifications.count && notifications.count > 0 && /* @__PURE__ */ jsxs(
79957
+ MoonUIBadgePro,
79958
+ {
79959
+ variant: "secondary",
79960
+ className: "h-5 px-2 rounded-full bg-primary/10 text-primary border-0",
79961
+ children: [
79962
+ notifications.count,
79963
+ " ",
79964
+ "new"
79965
+ ]
79966
+ }
79967
+ )
79968
+ ] }),
79969
+ notifications.items && notifications.items.length > 0 && /* @__PURE__ */ jsx(
79970
+ MoonUIButtonPro,
79971
+ {
79972
+ variant: "ghost",
79973
+ size: "sm",
79974
+ className: "text-xs h-7 px-2 text-muted-foreground hover:text-foreground",
79975
+ onClick: (e) => {
79976
+ e.preventDefault();
79977
+ console.log(
79978
+ "Mark all as read"
79979
+ );
79980
+ },
79981
+ children: "Mark all read"
79982
+ }
79983
+ )
79984
+ ] }),
79985
+ /* @__PURE__ */ jsx("div", { className: "max-h-[400px] overflow-y-auto", children: notifications.items && notifications.items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "py-1", children: notifications.items.map(
79986
+ (notification, index2) => /* @__PURE__ */ jsxs(
79987
+ "div",
79988
+ {
79989
+ children: [
79990
+ /* @__PURE__ */ jsx(
79991
+ "button",
79992
+ {
79993
+ className: cn(
79994
+ "w-full px-4 py-3 text-left hover:bg-muted/50 transition-colors",
79995
+ "focus:outline-none focus:bg-muted/50",
79996
+ !notification.read && "bg-primary/5 hover:bg-primary/10"
79997
+ ),
79998
+ onClick: () => notifications.onNotificationClick?.(
79999
+ notification.id
80000
+ ),
80001
+ children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
80002
+ /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(
80003
+ "div",
80004
+ {
80005
+ className: cn(
80006
+ "h-2 w-2 rounded-full",
80007
+ !notification.read ? "bg-primary" : "bg-transparent"
80008
+ )
80009
+ }
80010
+ ) }),
80011
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
80012
+ /* @__PURE__ */ jsx(
80013
+ "p",
80014
+ {
80015
+ className: cn(
80016
+ "text-sm leading-tight",
80017
+ !notification.read ? "font-medium" : "font-normal"
80018
+ ),
80019
+ children: notification.title
80020
+ }
80021
+ ),
80022
+ notification.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: notification.description }),
80023
+ notification.time && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 mt-1", children: notification.time })
80024
+ ] })
80025
+ ] })
80026
+ }
80027
+ ),
80028
+ index2 < (notifications.items?.length || 0) - 1 && /* @__PURE__ */ jsx("div", { className: "mx-4 border-b" })
80029
+ ]
80030
+ },
80031
+ notification.id
80032
+ )
80033
+ ) }) : /* @__PURE__ */ jsxs("div", { className: "py-12 text-center", children: [
80034
+ /* @__PURE__ */ jsx(Bell, { className: "h-10 w-10 mx-auto text-muted-foreground/30 mb-3" }),
80035
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "No new notifications" }),
80036
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 mt-1", children: "You're all caught up!" })
80037
+ ] }) }),
80038
+ notifications.items && notifications.items.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx(
80039
+ MoonUIButtonPro,
80040
+ {
80041
+ variant: "ghost",
80042
+ className: "w-full h-8 text-xs text-muted-foreground hover:text-foreground",
80043
+ onClick: (e) => {
80044
+ e.preventDefault();
80045
+ console.log(
80046
+ "View all notifications"
80047
+ );
80048
+ },
80049
+ children: "View all notifications"
80050
+ }
80051
+ ) })
80052
+ ]
80053
+ }
80054
+ )
80055
+ ] }),
80056
+ cta && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
80057
+ MoonUIButtonPro,
80058
+ {
80059
+ variant: cta.variant || "primary",
80060
+ size: isMobile ? "sm" : getSizeClasses().buttonSize,
80061
+ onClick: () => {
80062
+ if (cta.action) {
80063
+ cta.action();
80064
+ } else if (cta.href) {
80065
+ if (cta.href.startsWith("#")) {
80066
+ const targetElement = document.querySelector(
80067
+ cta.href
80068
+ );
80069
+ if (targetElement) {
80070
+ targetElement.scrollIntoView(
80071
+ {
80072
+ behavior: "smooth",
80073
+ block: "start"
80074
+ }
80075
+ );
80076
+ }
80077
+ } else if (onNavigate) {
80078
+ onNavigate(cta.href);
80079
+ } else {
80080
+ window.location.href = cta.href;
80081
+ }
80082
+ }
80083
+ },
80084
+ className: !isMobile ? "ml-2" : "",
80085
+ children: cta.text
80086
+ }
80087
+ ),
80088
+ userMenu && !framerScroll.isScrolled && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
80089
+ /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
80090
+ MoonUIButtonPro,
80091
+ {
80092
+ variant: "ghost",
80093
+ size: "icon",
80094
+ className: "relative",
80095
+ children: /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-8 w-8", children: [
80096
+ /* @__PURE__ */ jsx(
80097
+ MoonUIAvatarImagePro,
80098
+ {
80099
+ src: userMenu.user?.avatar,
80100
+ alt: userMenu.user?.name
80101
+ }
80102
+ ),
80103
+ /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { children: userMenu.user?.name?.charAt(
80104
+ 0
80105
+ ) || /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) })
80106
+ ] })
80107
+ }
80108
+ ) }),
80109
+ /* @__PURE__ */ jsxs(
80110
+ MoonUIDropdownMenuContentPro,
80111
+ {
80112
+ align: "end",
80113
+ className: "w-56",
80114
+ children: [
80115
+ userMenu.user && /* @__PURE__ */ jsxs(Fragment, { children: [
80116
+ /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
80117
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: userMenu.user.name }),
80118
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: userMenu.user.email })
80119
+ ] }),
80120
+ /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {})
80121
+ ] }),
80122
+ userMenu.items && renderDropdownMenu(
80123
+ userMenu.items
80124
+ )
80125
+ ]
80126
+ }
80127
+ )
80128
+ ] })
80129
+ ] })
80130
+ ]
80131
+ }
80132
+ )
80133
+ }
80134
+ )
80135
+ ) : (
80136
+ // Diğer variants için tek div
80137
+ /* @__PURE__ */ jsxs(
79559
80138
  "div",
79560
80139
  {
79561
80140
  className: cn(
79562
- "flex items-center space-x-4 sm:justify-between sm:space-x-0 transition-all duration-300",
79563
- getHeight(framerScroll.isScrolled)
80141
+ "flex items-center transition-all duration-300 ease-in-out",
80142
+ "transition-[height] duration-300 ease-in-out",
80143
+ getHeight(),
80144
+ // floating-centered için özel logic - outer nav zaten max-width kontrol ediyor
80145
+ variant === "floating-centered" ? "w-full px-6" : (
80146
+ // minimal variant için tam genişlik (menu'ler yayılsın)
80147
+ variant === "minimal" ? "w-full px-4 sm:px-6 lg:px-8" : 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"
80148
+ )
79564
80149
  ),
79565
80150
  children: [
79566
80151
  branding && /* @__PURE__ */ jsxs(
@@ -79568,7 +80153,7 @@ function NavbarInternal({
79568
80153
  {
79569
80154
  className: cn(
79570
80155
  "flex items-center gap-2",
79571
- logoPosition === "center" && !isMobile ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
80156
+ logoPosition === "center" && !isMobile && variant !== "floating-centered" ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
79572
80157
  ),
79573
80158
  children: [
79574
80159
  logoPosition === "left" && mobileMenuPosition === "left" && /* @__PURE__ */ jsx(MobileMenu, {}),
@@ -79590,7 +80175,10 @@ function NavbarInternal({
79590
80175
  initial: { opacity: 0, scale: 0.9 },
79591
80176
  animate: { opacity: 1, scale: 1 },
79592
80177
  exit: { opacity: 0, scale: 0.9 },
79593
- transition: { duration: 0.2, ease: "easeInOut" },
80178
+ transition: {
80179
+ duration: 0.2,
80180
+ ease: "easeInOut"
80181
+ },
79594
80182
  children: getActiveLogo()
79595
80183
  },
79596
80184
  `logo-${framerScroll.isScrolled ? "scrolled" : "default"}-${isDarkMode ? "dark" : "light"}`
@@ -79598,11 +80186,26 @@ function NavbarInternal({
79598
80186
  /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: branding.title && !isMobile && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
79599
80187
  motion.span,
79600
80188
  {
79601
- className: cn("font-semibold overflow-hidden", getSizeClasses().logoText),
79602
- initial: { opacity: 0, width: 0 },
79603
- animate: { opacity: 1, width: "auto" },
79604
- exit: { opacity: 0, width: 0 },
79605
- transition: { duration: 0.2, ease: "easeInOut" },
80189
+ className: cn(
80190
+ "font-semibold overflow-hidden",
80191
+ getSizeClasses().logoText
80192
+ ),
80193
+ initial: {
80194
+ opacity: 0,
80195
+ width: 0
80196
+ },
80197
+ animate: {
80198
+ opacity: 1,
80199
+ width: "auto"
80200
+ },
80201
+ exit: {
80202
+ opacity: 0,
80203
+ width: 0
80204
+ },
80205
+ transition: {
80206
+ duration: 0.2,
80207
+ ease: "easeInOut"
80208
+ },
79606
80209
  children: branding.title
79607
80210
  },
79608
80211
  "logo-text"
@@ -79618,86 +80221,113 @@ function NavbarInternal({
79618
80221
  {
79619
80222
  className: cn(
79620
80223
  "hidden md:flex",
80224
+ // Minimal için tam genişlik + spacing
80225
+ variant === "minimal" && "flex-1 w-full",
79621
80226
  // Overflow handling - minimal için otomatik expand, diğerleri user tercih
79622
80227
  autoExpand || !isFloatingVariant && variant === "minimal" ? "flex-nowrap" : "flex-wrap overflow-x-auto scrollbar-hide scroll-smooth",
79623
- // Positioning - floating variants
79624
- navItemsPosition === "center" && "flex-1 justify-center mx-4",
80228
+ // Positioning
80229
+ navItemsPosition === "center" && variant !== "floating-centered" && "flex-1 justify-center mx-4",
80230
+ navItemsPosition === "center" && variant === "floating-centered" && "flex-1 justify-center",
79625
80231
  navItemsPosition === "right" && "ml-auto",
79626
80232
  navItemsPosition === "left" && "ml-4",
79627
80233
  // Keep position consistent in minimal mode unless centerOnScroll is enabled
79628
80234
  isMinimal && minimalConfig?.centerOnScroll && navItemsPosition !== "center" && "flex-1 justify-center",
79629
- navItemsPosition === "center" && "absolute left-1/2 transform -translate-x-1/2"
80235
+ navItemsPosition === "center" && variant !== "floating-centered" && "absolute left-1/2 transform -translate-x-1/2"
79630
80236
  ),
79631
- children: /* @__PURE__ */ jsx(NavigationMenuList2, { children: sections.map((section) => /* @__PURE__ */ jsx(React71__default.Fragment, { children: section.items.map((item) => {
79632
- const hasChildren = item.items && item.items.length > 0;
79633
- const isActive2 = item.href === activePath;
79634
- if (hasChildren) {
79635
- return /* @__PURE__ */ jsxs(
79636
- NavigationMenuItem2,
79637
- {
79638
- children: [
79639
- /* @__PURE__ */ jsx(
79640
- NavigationMenuTrigger2,
79641
- {
79642
- className: cn(
79643
- isActive2 && "bg-accent text-accent-foreground",
79644
- item.disabled && "opacity-50 cursor-not-allowed"
80237
+ children: /* @__PURE__ */ jsx(
80238
+ NavigationMenuList2,
80239
+ {
80240
+ className: cn(
80241
+ // Minimal için item'ları yay
80242
+ variant === "minimal" && "w-full justify-between gap-1"
80243
+ ),
80244
+ children: sections.map((section) => /* @__PURE__ */ jsx(React71__default.Fragment, { children: section.items.map((item) => {
80245
+ const hasChildren = item.items && item.items.length > 0;
80246
+ const isActive2 = item.href === activePath;
80247
+ if (hasChildren) {
80248
+ return /* @__PURE__ */ jsxs(
80249
+ NavigationMenuItem2,
80250
+ {
80251
+ children: [
80252
+ /* @__PURE__ */ jsx(
80253
+ NavigationMenuTrigger2,
80254
+ {
80255
+ className: cn(
80256
+ isActive2 && "bg-accent text-accent-foreground",
80257
+ item.disabled && "opacity-50 cursor-not-allowed"
80258
+ ),
80259
+ disabled: item.disabled,
80260
+ children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
80261
+ item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
80262
+ item.title
80263
+ ] })
80264
+ }
79645
80265
  ),
79646
- disabled: item.disabled,
79647
- children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
79648
- item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
79649
- item.title
79650
- ] })
80266
+ /* @__PURE__ */ jsx(NavigationMenuContent2, { children: item.items && renderMegaMenuContent(
80267
+ item.items
80268
+ ) })
80269
+ ]
80270
+ },
80271
+ item.id
80272
+ );
80273
+ }
80274
+ return /* @__PURE__ */ jsx(
80275
+ NavigationMenuItem2,
80276
+ {
80277
+ children: /* @__PURE__ */ jsxs(
80278
+ NavigationMenuLink2,
80279
+ {
80280
+ className: cn(
80281
+ navigationMenuTriggerStyle(),
80282
+ "cursor-pointer",
80283
+ getSizeClasses().text,
80284
+ getSizeClasses().padding,
80285
+ isActive2 && "bg-accent text-accent-foreground",
80286
+ item.disabled && "opacity-50 cursor-not-allowed"
80287
+ ),
80288
+ onClick: () => !item.disabled && handleItemClick(
80289
+ item
80290
+ ),
80291
+ children: [
80292
+ /* @__PURE__ */ jsxs(
80293
+ "span",
80294
+ {
80295
+ className: cn(
80296
+ "flex items-center",
80297
+ getSizeClasses().gap
80298
+ ),
80299
+ children: [
80300
+ item.icon && /* @__PURE__ */ jsx(
80301
+ "span",
80302
+ {
80303
+ className: getSizeClasses().iconSize,
80304
+ children: item.icon
80305
+ }
80306
+ ),
80307
+ item.title
80308
+ ]
80309
+ }
80310
+ ),
80311
+ item.badge && /* @__PURE__ */ jsx(
80312
+ MoonUIBadgePro,
80313
+ {
80314
+ variant: item.badgeVariant || "secondary",
80315
+ className: "ml-2",
80316
+ children: item.badge
80317
+ }
80318
+ )
80319
+ ]
79651
80320
  }
79652
- ),
79653
- /* @__PURE__ */ jsx(NavigationMenuContent2, { children: item.items && renderMegaMenuContent(
79654
- item.items
79655
- ) })
79656
- ]
79657
- },
79658
- item.id
79659
- );
80321
+ )
80322
+ },
80323
+ item.id
80324
+ );
80325
+ }) }, section.id))
79660
80326
  }
79661
- return /* @__PURE__ */ jsx(
79662
- NavigationMenuItem2,
79663
- {
79664
- children: /* @__PURE__ */ jsxs(
79665
- NavigationMenuLink2,
79666
- {
79667
- className: cn(
79668
- navigationMenuTriggerStyle(),
79669
- "cursor-pointer",
79670
- getSizeClasses().text,
79671
- getSizeClasses().padding,
79672
- isActive2 && "bg-accent text-accent-foreground",
79673
- item.disabled && "opacity-50 cursor-not-allowed"
79674
- ),
79675
- onClick: () => !item.disabled && handleItemClick(
79676
- item
79677
- ),
79678
- children: [
79679
- /* @__PURE__ */ jsxs("span", { className: cn("flex items-center", getSizeClasses().gap), children: [
79680
- item.icon && /* @__PURE__ */ jsx("span", { className: getSizeClasses().iconSize, children: item.icon }),
79681
- item.title
79682
- ] }),
79683
- item.badge && /* @__PURE__ */ jsx(
79684
- MoonUIBadgePro,
79685
- {
79686
- variant: item.badgeVariant || "secondary",
79687
- className: "ml-2",
79688
- children: item.badge
79689
- }
79690
- )
79691
- ]
79692
- }
79693
- )
79694
- },
79695
- item.id
79696
- );
79697
- }) }, section.id)) })
80327
+ )
79698
80328
  }
79699
80329
  ),
79700
- /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
80330
+ /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1 sm:gap-2", children: [
79701
80331
  showSearch && !framerScroll.isScrolled && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
79702
80332
  MoonUIButtonPro,
79703
80333
  {
@@ -79746,29 +80376,69 @@ function NavbarInternal({
79746
80376
  onThemeChange?.(newTheme);
79747
80377
  if (typeof window !== "undefined") {
79748
80378
  const root = window.document.documentElement;
79749
- root.classList.remove("light", "dark");
79750
- root.classList.add(newTheme);
80379
+ root.classList.remove(
80380
+ "light",
80381
+ "dark"
80382
+ );
80383
+ root.classList.add(
80384
+ newTheme
80385
+ );
79751
80386
  }
79752
80387
  },
79753
80388
  className: "relative overflow-hidden",
79754
80389
  children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: currentTheme === "dark" ? /* @__PURE__ */ jsx(
79755
80390
  motion.div,
79756
80391
  {
79757
- initial: { y: -20, opacity: 0 },
79758
- animate: { y: 0, opacity: 1 },
79759
- exit: { y: 20, opacity: 0 },
79760
- transition: { duration: 0.2 },
79761
- children: /* @__PURE__ */ jsx(Moon, { className: getSizeClasses().iconSize })
80392
+ initial: {
80393
+ y: -20,
80394
+ opacity: 0
80395
+ },
80396
+ animate: {
80397
+ y: 0,
80398
+ opacity: 1
80399
+ },
80400
+ exit: {
80401
+ y: 20,
80402
+ opacity: 0
80403
+ },
80404
+ transition: {
80405
+ duration: 0.2
80406
+ },
80407
+ children: /* @__PURE__ */ jsx(
80408
+ Moon,
80409
+ {
80410
+ className: getSizeClasses().iconSize
80411
+ }
80412
+ )
79762
80413
  },
79763
80414
  "moon"
79764
80415
  ) : /* @__PURE__ */ jsx(
79765
80416
  motion.div,
79766
80417
  {
79767
- initial: { y: -20, opacity: 0, rotate: -90 },
79768
- animate: { y: 0, opacity: 1, rotate: 0 },
79769
- exit: { y: 20, opacity: 0, rotate: 90 },
79770
- transition: { duration: 0.2 },
79771
- children: /* @__PURE__ */ jsx(Sun, { className: getSizeClasses().iconSize })
80418
+ initial: {
80419
+ y: -20,
80420
+ opacity: 0,
80421
+ rotate: -90
80422
+ },
80423
+ animate: {
80424
+ y: 0,
80425
+ opacity: 1,
80426
+ rotate: 0
80427
+ },
80428
+ exit: {
80429
+ y: 20,
80430
+ opacity: 0,
80431
+ rotate: 90
80432
+ },
80433
+ transition: {
80434
+ duration: 0.2
80435
+ },
80436
+ children: /* @__PURE__ */ jsx(
80437
+ Sun,
80438
+ {
80439
+ className: getSizeClasses().iconSize
80440
+ }
80441
+ )
79772
80442
  },
79773
80443
  "sun"
79774
80444
  ) })
@@ -79950,18 +80620,22 @@ function NavbarInternal({
79950
80620
  MoonUIButtonPro,
79951
80621
  {
79952
80622
  variant: cta.variant || "primary",
79953
- size: getSizeClasses().buttonSize,
80623
+ size: isMobile ? "sm" : getSizeClasses().buttonSize,
79954
80624
  onClick: () => {
79955
80625
  if (cta.action) {
79956
80626
  cta.action();
79957
80627
  } else if (cta.href) {
79958
80628
  if (cta.href.startsWith("#")) {
79959
- const targetElement = document.querySelector(cta.href);
80629
+ const targetElement = document.querySelector(
80630
+ cta.href
80631
+ );
79960
80632
  if (targetElement) {
79961
- targetElement.scrollIntoView({
79962
- behavior: "smooth",
79963
- block: "start"
79964
- });
80633
+ targetElement.scrollIntoView(
80634
+ {
80635
+ behavior: "smooth",
80636
+ block: "start"
80637
+ }
80638
+ );
79965
80639
  }
79966
80640
  } else if (onNavigate) {
79967
80641
  onNavigate(cta.href);
@@ -80017,546 +80691,64 @@ function NavbarInternal({
80017
80691
  ]
80018
80692
  }
80019
80693
  )
80020
- }
80021
- )
80022
- ) : (
80023
- // Diğer variants için tek div
80024
- /* @__PURE__ */ jsxs(
80025
- "div",
80026
- {
80027
- className: cn(
80028
- "flex items-center transition-all duration-300 ease-in-out",
80029
- "transition-[height] duration-300 ease-in-out",
80030
- getHeight(),
80031
- // floating-centered için özel logic - outer nav zaten max-width kontrol ediyor
80032
- variant === "floating-centered" ? "w-full px-6" : (
80033
- // minimal variant için tam genişlik (menu'ler yayılsın)
80034
- variant === "minimal" ? "w-full px-4 sm:px-6 lg:px-8" : 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"
80035
- )
80036
- ),
80037
- children: [
80038
- branding && /* @__PURE__ */ jsxs(
80039
- "div",
80040
- {
80041
- className: cn(
80042
- "flex items-center gap-2",
80043
- logoPosition === "center" && !isMobile && variant !== "floating-centered" ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
80044
- ),
80045
- children: [
80046
- logoPosition === "left" && mobileMenuPosition === "left" && /* @__PURE__ */ jsx(MobileMenu, {}),
80047
- /* @__PURE__ */ jsxs(
80048
- "a",
80049
- {
80050
- href: branding.href || "/",
80051
- onClick: (e) => {
80052
- if (branding.href && onNavigate) {
80053
- e.preventDefault();
80054
- onNavigate(branding.href);
80055
- }
80056
- },
80057
- className: "flex items-center gap-2",
80058
- children: [
80059
- /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
80060
- motion.div,
80061
- {
80062
- initial: { opacity: 0, scale: 0.9 },
80063
- animate: { opacity: 1, scale: 1 },
80064
- exit: { opacity: 0, scale: 0.9 },
80065
- transition: { duration: 0.2, ease: "easeInOut" },
80066
- children: getActiveLogo()
80067
- },
80068
- `logo-${framerScroll.isScrolled ? "scrolled" : "default"}-${isDarkMode ? "dark" : "light"}`
80069
- ) }),
80070
- /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: branding.title && !isMobile && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
80071
- motion.span,
80072
- {
80073
- className: cn("font-semibold overflow-hidden", getSizeClasses().logoText),
80074
- initial: { opacity: 0, width: 0 },
80075
- animate: { opacity: 1, width: "auto" },
80076
- exit: { opacity: 0, width: 0 },
80077
- transition: { duration: 0.2, ease: "easeInOut" },
80078
- children: branding.title
80079
- },
80080
- "logo-text"
80081
- ) })
80082
- ]
80083
- }
80084
- )
80085
- ]
80086
- }
80087
- ),
80088
- !isMobile && !hideNavItems && /* @__PURE__ */ jsx(
80089
- NavigationMenu2,
80090
- {
80091
- className: cn(
80092
- "hidden md:flex",
80093
- // Minimal için tam genişlik + spacing
80094
- variant === "minimal" && "flex-1 w-full",
80095
- // Overflow handling - minimal için otomatik expand, diğerleri user tercih
80096
- autoExpand || !isFloatingVariant && variant === "minimal" ? "flex-nowrap" : "flex-wrap overflow-x-auto scrollbar-hide scroll-smooth",
80097
- // Positioning
80098
- navItemsPosition === "center" && variant !== "floating-centered" && "flex-1 justify-center mx-4",
80099
- navItemsPosition === "center" && variant === "floating-centered" && "flex-1 justify-center",
80100
- navItemsPosition === "right" && "ml-auto",
80101
- navItemsPosition === "left" && "ml-4",
80102
- // Keep position consistent in minimal mode unless centerOnScroll is enabled
80103
- isMinimal && minimalConfig?.centerOnScroll && navItemsPosition !== "center" && "flex-1 justify-center",
80104
- navItemsPosition === "center" && variant !== "floating-centered" && "absolute left-1/2 transform -translate-x-1/2"
80105
- ),
80106
- children: /* @__PURE__ */ jsx(
80107
- NavigationMenuList2,
80108
- {
80109
- className: cn(
80110
- // Minimal için item'ları yay
80111
- variant === "minimal" && "w-full justify-between gap-1"
80112
- ),
80113
- children: sections.map((section) => /* @__PURE__ */ jsx(React71__default.Fragment, { children: section.items.map((item) => {
80114
- const hasChildren = item.items && item.items.length > 0;
80115
- const isActive2 = item.href === activePath;
80116
- if (hasChildren) {
80117
- return /* @__PURE__ */ jsxs(
80118
- NavigationMenuItem2,
80119
- {
80120
- children: [
80121
- /* @__PURE__ */ jsx(
80122
- NavigationMenuTrigger2,
80123
- {
80124
- className: cn(
80125
- isActive2 && "bg-accent text-accent-foreground",
80126
- item.disabled && "opacity-50 cursor-not-allowed"
80127
- ),
80128
- disabled: item.disabled,
80129
- children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
80130
- item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
80131
- item.title
80132
- ] })
80133
- }
80134
- ),
80135
- /* @__PURE__ */ jsx(NavigationMenuContent2, { children: item.items && renderMegaMenuContent(
80136
- item.items
80137
- ) })
80138
- ]
80139
- },
80140
- item.id
80141
- );
80142
- }
80143
- return /* @__PURE__ */ jsx(
80144
- NavigationMenuItem2,
80145
- {
80146
- children: /* @__PURE__ */ jsxs(
80147
- NavigationMenuLink2,
80148
- {
80149
- className: cn(
80150
- navigationMenuTriggerStyle(),
80151
- "cursor-pointer",
80152
- getSizeClasses().text,
80153
- getSizeClasses().padding,
80154
- isActive2 && "bg-accent text-accent-foreground",
80155
- item.disabled && "opacity-50 cursor-not-allowed"
80156
- ),
80157
- onClick: () => !item.disabled && handleItemClick(
80158
- item
80159
- ),
80160
- children: [
80161
- /* @__PURE__ */ jsxs("span", { className: cn("flex items-center", getSizeClasses().gap), children: [
80162
- item.icon && /* @__PURE__ */ jsx("span", { className: getSizeClasses().iconSize, children: item.icon }),
80163
- item.title
80164
- ] }),
80165
- item.badge && /* @__PURE__ */ jsx(
80166
- MoonUIBadgePro,
80167
- {
80168
- variant: item.badgeVariant || "secondary",
80169
- className: "ml-2",
80170
- children: item.badge
80171
- }
80172
- )
80173
- ]
80174
- }
80175
- )
80176
- },
80177
- item.id
80178
- );
80179
- }) }, section.id))
80180
- }
80181
- )
80182
- }
80183
- ),
80184
- /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
80185
- showSearch && !framerScroll.isScrolled && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
80186
- MoonUIButtonPro,
80187
- {
80188
- variant: "ghost",
80189
- size: "icon",
80190
- onClick: () => setIsCommandOpen(true),
80191
- children: /* @__PURE__ */ jsx(Search, { className: "h-5 w-5" })
80192
- }
80193
- ) : /* @__PURE__ */ jsxs("div", { className: "relative", children: [
80194
- /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
80195
- /* @__PURE__ */ jsx(
80196
- MoonUIInputPro,
80197
- {
80198
- type: "search",
80199
- placeholder: searchPlaceholder,
80200
- className: "w-64 pl-9 pr-4 h-9 cursor-pointer",
80201
- value: searchValue,
80202
- onChange: (e) => handleSearch(e.target.value),
80203
- onClick: () => {
80204
- if (enableCommandAI) {
80205
- setIsCommandOpen(true);
80206
- onCommandAIOpen?.();
80207
- }
80208
- },
80209
- readOnly: enableCommandAI
80210
- }
80211
- ),
80212
- (keyboardShortcuts || enableCommandAI) && /* @__PURE__ */ jsx("kbd", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex", children: enableCommandAI ? commandAIShortcut : /* @__PURE__ */ jsxs(Fragment, { children: [
80213
- /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
80214
- "K"
80215
- ] }) })
80216
- ] }) }),
80217
- showThemeToggle && (themeToggleVariant === "button" ? /* @__PURE__ */ jsx(
80218
- motion.div,
80219
- {
80220
- whileTap: { scale: 0.95 },
80221
- className: "relative",
80222
- children: /* @__PURE__ */ jsx(
80223
- MoonUIButtonPro,
80224
- {
80225
- variant: "ghost",
80226
- size: getSizeClasses().buttonSize,
80227
- onClick: () => {
80228
- const newTheme = currentTheme === "dark" ? "light" : "dark";
80229
- setCurrentTheme(newTheme);
80230
- onThemeChange?.(newTheme);
80231
- if (typeof window !== "undefined") {
80232
- const root = window.document.documentElement;
80233
- root.classList.remove("light", "dark");
80234
- root.classList.add(newTheme);
80235
- }
80236
- },
80237
- className: "relative overflow-hidden",
80238
- children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: currentTheme === "dark" ? /* @__PURE__ */ jsx(
80239
- motion.div,
80240
- {
80241
- initial: { y: -20, opacity: 0 },
80242
- animate: { y: 0, opacity: 1 },
80243
- exit: { y: 20, opacity: 0 },
80244
- transition: { duration: 0.2 },
80245
- children: /* @__PURE__ */ jsx(Moon, { className: getSizeClasses().iconSize })
80246
- },
80247
- "moon"
80248
- ) : /* @__PURE__ */ jsx(
80249
- motion.div,
80250
- {
80251
- initial: { y: -20, opacity: 0, rotate: -90 },
80252
- animate: { y: 0, opacity: 1, rotate: 0 },
80253
- exit: { y: 20, opacity: 0, rotate: 90 },
80254
- transition: { duration: 0.2 },
80255
- children: /* @__PURE__ */ jsx(Sun, { className: getSizeClasses().iconSize })
80256
- },
80257
- "sun"
80258
- ) })
80259
- }
80260
- )
80261
- }
80262
- ) : /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
80263
- /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "icon", children: [
80264
- currentTheme === "light" && /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5" }),
80265
- currentTheme === "dark" && /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5" }),
80266
- currentTheme === "system" && /* @__PURE__ */ jsx(Monitor, { className: "h-5 w-5" })
80267
- ] }) }),
80268
- /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
80269
- /* @__PURE__ */ jsxs(
80270
- MoonUIDropdownMenuItemPro,
80271
- {
80272
- onClick: () => {
80273
- setCurrentTheme("light");
80274
- onThemeChange?.("light");
80275
- },
80276
- children: [
80277
- /* @__PURE__ */ jsx(Sun, { className: "mr-2 h-4 w-4" }),
80278
- "Light"
80279
- ]
80280
- }
80281
- ),
80282
- /* @__PURE__ */ jsxs(
80283
- MoonUIDropdownMenuItemPro,
80284
- {
80285
- onClick: () => {
80286
- setCurrentTheme("dark");
80287
- onThemeChange?.("dark");
80288
- },
80289
- children: [
80290
- /* @__PURE__ */ jsx(Moon, { className: "mr-2 h-4 w-4" }),
80291
- "Dark"
80292
- ]
80293
- }
80294
- ),
80295
- /* @__PURE__ */ jsxs(
80296
- MoonUIDropdownMenuItemPro,
80297
- {
80298
- onClick: () => {
80299
- setCurrentTheme("system");
80300
- onThemeChange?.("system");
80301
- },
80302
- children: [
80303
- /* @__PURE__ */ jsx(Monitor, { className: "mr-2 h-4 w-4" }),
80304
- "System"
80305
- ]
80306
- }
80307
- )
80308
- ] })
80309
- ] })),
80310
- notifications && !framerScroll.isScrolled && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
80311
- /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
80312
- MoonUIButtonPro,
80313
- {
80314
- variant: "ghost",
80315
- size: "icon",
80316
- className: "relative",
80317
- children: [
80318
- /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
80319
- notifications.count && notifications.count > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 min-w-[18px] h-[18px] rounded-full bg-red-500 text-[11px] font-medium text-white flex items-center justify-center px-1", children: notifications.count > 9 ? "9+" : notifications.count })
80320
- ]
80321
- }
80322
- ) }),
80323
- /* @__PURE__ */ jsxs(
80324
- MoonUIDropdownMenuContentPro,
80325
- {
80326
- align: "end",
80327
- className: "w-[380px] p-0",
80328
- sideOffset: 8,
80329
- children: [
80330
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [
80331
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
80332
- /* @__PURE__ */ jsx("h4", { className: "text-base font-semibold", children: "Notifications" }),
80333
- notifications.count && notifications.count > 0 && /* @__PURE__ */ jsxs(
80334
- MoonUIBadgePro,
80335
- {
80336
- variant: "secondary",
80337
- className: "h-5 px-2 rounded-full bg-primary/10 text-primary border-0",
80338
- children: [
80339
- notifications.count,
80340
- " ",
80341
- "new"
80342
- ]
80343
- }
80344
- )
80345
- ] }),
80346
- notifications.items && notifications.items.length > 0 && /* @__PURE__ */ jsx(
80347
- MoonUIButtonPro,
80348
- {
80349
- variant: "ghost",
80350
- size: "sm",
80351
- className: "text-xs h-7 px-2 text-muted-foreground hover:text-foreground",
80352
- onClick: (e) => {
80353
- e.preventDefault();
80354
- console.log(
80355
- "Mark all as read"
80356
- );
80357
- },
80358
- children: "Mark all read"
80359
- }
80360
- )
80361
- ] }),
80362
- /* @__PURE__ */ jsx("div", { className: "max-h-[400px] overflow-y-auto", children: notifications.items && notifications.items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "py-1", children: notifications.items.map(
80363
- (notification, index2) => /* @__PURE__ */ jsxs(
80364
- "div",
80365
- {
80366
- children: [
80367
- /* @__PURE__ */ jsx(
80368
- "button",
80369
- {
80370
- className: cn(
80371
- "w-full px-4 py-3 text-left hover:bg-muted/50 transition-colors",
80372
- "focus:outline-none focus:bg-muted/50",
80373
- !notification.read && "bg-primary/5 hover:bg-primary/10"
80374
- ),
80375
- onClick: () => notifications.onNotificationClick?.(
80376
- notification.id
80377
- ),
80378
- children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
80379
- /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(
80380
- "div",
80381
- {
80382
- className: cn(
80383
- "h-2 w-2 rounded-full",
80384
- !notification.read ? "bg-primary" : "bg-transparent"
80385
- )
80386
- }
80387
- ) }),
80388
- /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
80389
- /* @__PURE__ */ jsx(
80390
- "p",
80391
- {
80392
- className: cn(
80393
- "text-sm leading-tight",
80394
- !notification.read ? "font-medium" : "font-normal"
80395
- ),
80396
- children: notification.title
80397
- }
80398
- ),
80399
- notification.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: notification.description }),
80400
- notification.time && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 mt-1", children: notification.time })
80401
- ] })
80402
- ] })
80403
- }
80404
- ),
80405
- index2 < (notifications.items?.length || 0) - 1 && /* @__PURE__ */ jsx("div", { className: "mx-4 border-b" })
80406
- ]
80407
- },
80408
- notification.id
80409
- )
80410
- ) }) : /* @__PURE__ */ jsxs("div", { className: "py-12 text-center", children: [
80411
- /* @__PURE__ */ jsx(Bell, { className: "h-10 w-10 mx-auto text-muted-foreground/30 mb-3" }),
80412
- /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "No new notifications" }),
80413
- /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 mt-1", children: "You're all caught up!" })
80414
- ] }) }),
80415
- notifications.items && notifications.items.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx(
80416
- MoonUIButtonPro,
80417
- {
80418
- variant: "ghost",
80419
- className: "w-full h-8 text-xs text-muted-foreground hover:text-foreground",
80420
- onClick: (e) => {
80421
- e.preventDefault();
80422
- console.log(
80423
- "View all notifications"
80424
- );
80425
- },
80426
- children: "View all notifications"
80427
- }
80428
- ) })
80429
- ]
80430
- }
80431
- )
80432
- ] }),
80433
- cta && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
80434
- MoonUIButtonPro,
80435
- {
80436
- variant: cta.variant || "primary",
80437
- size: getSizeClasses().buttonSize,
80438
- onClick: () => {
80439
- if (cta.action) {
80440
- cta.action();
80441
- } else if (cta.href) {
80442
- if (cta.href.startsWith("#")) {
80443
- const targetElement = document.querySelector(cta.href);
80444
- if (targetElement) {
80445
- targetElement.scrollIntoView({
80446
- behavior: "smooth",
80447
- block: "start"
80448
- });
80449
- }
80450
- } else if (onNavigate) {
80451
- onNavigate(cta.href);
80452
- } else {
80453
- window.location.href = cta.href;
80454
- }
80455
- }
80456
- },
80457
- className: !isMobile ? "ml-2" : "",
80458
- children: cta.text
80459
- }
80460
- ),
80461
- userMenu && !framerScroll.isScrolled && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
80462
- /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
80463
- MoonUIButtonPro,
80464
- {
80465
- variant: "ghost",
80466
- size: "icon",
80467
- className: "relative",
80468
- children: /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-8 w-8", children: [
80469
- /* @__PURE__ */ jsx(
80470
- MoonUIAvatarImagePro,
80471
- {
80472
- src: userMenu.user?.avatar,
80473
- alt: userMenu.user?.name
80474
- }
80475
- ),
80476
- /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { children: userMenu.user?.name?.charAt(
80477
- 0
80478
- ) || /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) })
80479
- ] })
80480
- }
80481
- ) }),
80482
- /* @__PURE__ */ jsxs(
80483
- MoonUIDropdownMenuContentPro,
80484
- {
80485
- align: "end",
80486
- className: "w-56",
80487
- children: [
80488
- userMenu.user && /* @__PURE__ */ jsxs(Fragment, { children: [
80489
- /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
80490
- /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: userMenu.user.name }),
80491
- /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: userMenu.user.email })
80492
- ] }),
80493
- /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {})
80494
- ] }),
80495
- userMenu.items && renderDropdownMenu(userMenu.items)
80496
- ]
80497
- }
80498
- )
80499
- ] })
80500
- ] })
80501
- ]
80502
- }
80503
- )
80504
- ),
80505
- animatedBackground && /* @__PURE__ */ jsx(
80506
- motion.div,
80507
- {
80508
- className: "absolute inset-0 -z-10 opacity-30",
80509
- animate: {
80510
- background: [
80511
- "radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%)",
80512
- "radial-gradient(circle at 80% 50%, rgba(120, 119, 198, 0.3), transparent 50%)",
80513
- "radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%)"
80514
- ]
80515
- },
80516
- transition: {
80517
- duration: 10,
80518
- repeat: Infinity,
80519
- ease: "linear"
80520
- }
80521
- }
80522
- ),
80523
- showScrollProgress && /* @__PURE__ */ jsx(
80524
- "div",
80525
- {
80526
- className: cn(
80527
- "absolute h-0.5 bg-muted transition-all",
80528
- // progressBarInset kontrolü - border-radius içinde mi dışında mı
80529
- progressBarInset ? cn(
80530
- "bottom-1 overflow-hidden",
80531
- // İçerideki progress bar taşmasın
80532
- // Variant'a göre positioning - navbar padding ile uyumlu
80533
- variant === "floating-centered" && "left-6 right-6",
80534
- // px-6 ile uyumlu
80535
- variant === "floating" && "left-4 right-4",
80536
- // mx-4 margin ile uyumlu
80537
- (!variant || variant === "default") && "left-2 right-2",
80538
- // minimal padding
80539
- variant === "minimal" && "left-2 right-2",
80540
- variant === "transparent" && "left-2 right-2",
80541
- variant === "floating-auto-hide" && "left-2 right-2",
80542
- variant === "floating-sticky" && "left-2 right-2",
80543
- // Border-radius uyumu
80544
- rounded && "rounded-b-lg",
80545
- variant === "floating-centered" && "rounded-b-2xl",
80546
- variant === "floating" && "rounded-b-lg"
80547
- ) : "bottom-0 left-0 right-0"
80548
- // Dışarıdan (backward compat)
80549
80694
  ),
80550
- children: /* @__PURE__ */ jsx(
80695
+ animatedBackground && /* @__PURE__ */ jsx(
80696
+ motion.div,
80697
+ {
80698
+ className: "absolute inset-0 -z-10 opacity-30",
80699
+ animate: {
80700
+ background: [
80701
+ "radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%)",
80702
+ "radial-gradient(circle at 80% 50%, rgba(120, 119, 198, 0.3), transparent 50%)",
80703
+ "radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%)"
80704
+ ]
80705
+ },
80706
+ transition: {
80707
+ duration: 10,
80708
+ repeat: Infinity,
80709
+ ease: "linear"
80710
+ }
80711
+ }
80712
+ ),
80713
+ showScrollProgress && /* @__PURE__ */ jsx(
80551
80714
  "div",
80552
80715
  {
80553
- className: "h-full bg-primary transition-all duration-150",
80554
- style: { width: `${scrollProgress}%` }
80716
+ className: cn(
80717
+ "absolute h-0.5 bg-muted transition-all",
80718
+ // progressBarInset kontrolü - border-radius içinde mi dışında mı
80719
+ progressBarInset ? cn(
80720
+ "bottom-1 overflow-hidden",
80721
+ // İçerideki progress bar taşmasın
80722
+ // Variant'a göre positioning - navbar padding ile uyumlu
80723
+ variant === "floating-centered" && "left-6 right-6",
80724
+ // px-6 ile uyumlu
80725
+ variant === "floating" && "left-4 right-4",
80726
+ // mx-4 margin ile uyumlu
80727
+ (!variant || variant === "default") && "left-2 right-2",
80728
+ // minimal padding
80729
+ variant === "minimal" && "left-2 right-2",
80730
+ variant === "transparent" && "left-2 right-2",
80731
+ variant === "floating-auto-hide" && "left-2 right-2",
80732
+ variant === "floating-sticky" && "left-2 right-2",
80733
+ // Border-radius uyumu
80734
+ rounded && "rounded-b-lg",
80735
+ variant === "floating-centered" && "rounded-b-2xl",
80736
+ variant === "floating" && "rounded-b-lg"
80737
+ ) : "bottom-0 left-0 right-0"
80738
+ // Dışarıdan (backward compat)
80739
+ ),
80740
+ children: /* @__PURE__ */ jsx(
80741
+ "div",
80742
+ {
80743
+ className: "h-full bg-primary transition-all duration-150",
80744
+ style: { width: `${scrollProgress}%` }
80745
+ }
80746
+ )
80555
80747
  }
80556
80748
  )
80557
- }
80558
- )
80559
- ] }),
80749
+ ]
80750
+ }
80751
+ ),
80560
80752
  /* @__PURE__ */ jsxs(
80561
80753
  MoonUICommandDialogPro,
80562
80754
  {