aura-ui-library 1.0.29 → 1.0.30

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.
Files changed (3) hide show
  1. package/dist/index.js +218 -122
  2. package/dist/index.mjs +219 -122
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -256,11 +256,20 @@ var import_react2 = __toESM(require("react"));
256
256
  var import_react_router_dom2 = require("react-router-dom");
257
257
  var import_gsap2 = require("gsap");
258
258
  var import_fi = require("react-icons/fi");
259
+ var SCROLLBAR_STYLE = `
260
+ .aura-no-scroll::-webkit-scrollbar {
261
+ display: none;
262
+ }
263
+ .aura-no-scroll {
264
+ -ms-overflow-style: none;
265
+ scrollbar-width: none;
266
+ }
267
+ `;
259
268
  var Navbar = ({
260
269
  logoText = "AURA",
261
270
  showBadge = true,
262
271
  variant = "overlay",
263
- // "overlay" | "classic"
272
+ // "overlay" | "classic" | "product"
264
273
  links = [
265
274
  { label: "Home", path: "/" },
266
275
  {
@@ -285,14 +294,25 @@ var Navbar = ({
285
294
  email: "hello@aura-ui.dev",
286
295
  address: "123 Innovation Drive, SF"
287
296
  },
288
- // E-commerce Triggers
297
+ // E-commerce & Action Triggers
289
298
  showSearch = false,
290
- onSearch = () => console.log("Search clicked"),
299
+ onSearch = null,
300
+ searchContent = null,
301
+ // React Node rendered inside popover
291
302
  showCart = false,
292
303
  cartCount = 0,
293
- onCartClick = () => console.log("Cart clicked"),
304
+ onCartClick = null,
305
+ cartContent = null,
306
+ // React Node rendered inside popover
294
307
  showUser = false,
295
- onUserClick = () => console.log("User clicked"),
308
+ onUserClick = null,
309
+ userContent = null,
310
+ // React Node rendered inside popover
311
+ showNotification = false,
312
+ notificationCount = 0,
313
+ onNotificationClick = null,
314
+ notificationContent = null,
315
+ // React Node rendered inside popover
296
316
  // Theme & Styling
297
317
  accentColor = "#6366f1",
298
318
  theme = "dark",
@@ -308,6 +328,7 @@ var Navbar = ({
308
328
  const [isMobile, setIsMobile] = (0, import_react2.useState)(false);
309
329
  const [hoverIndex, setHoverIndex] = (0, import_react2.useState)(null);
310
330
  const [expandedOverlay, setExpandedOverlay] = (0, import_react2.useState)(null);
331
+ const [activePopover, setActivePopover] = (0, import_react2.useState)(null);
311
332
  const inRouter = (0, import_react_router_dom2.useInRouterContext)();
312
333
  const navigate = inRouter ? (0, import_react_router_dom2.useNavigate)() : null;
313
334
  const location = inRouter ? (0, import_react_router_dom2.useLocation)() : { pathname: "/" };
@@ -315,6 +336,7 @@ var Navbar = ({
315
336
  const linksContainerRef = (0, import_react2.useRef)(null);
316
337
  const infoContainerRef = (0, import_react2.useRef)(null);
317
338
  const desktopDropdownRefs = (0, import_react2.useRef)({});
339
+ const rightActionsRef = (0, import_react2.useRef)(null);
318
340
  const isLight2 = theme === "light";
319
341
  const bgMain = isLight2 ? "#ffffff" : "#050505";
320
342
  const textMain = isLight2 ? "#0f172a" : "#ffffff";
@@ -326,12 +348,19 @@ var Navbar = ({
326
348
  (0, import_react2.useEffect)(() => {
327
349
  const handleResize = () => setIsMobile(window.innerWidth < 1024);
328
350
  const handleScroll = () => setIsScrolled(window.scrollY > 50);
351
+ const handleClickOutside = (e) => {
352
+ if (rightActionsRef.current && !rightActionsRef.current.contains(e.target)) {
353
+ setActivePopover(null);
354
+ }
355
+ };
329
356
  handleResize();
330
357
  window.addEventListener("resize", handleResize);
331
358
  window.addEventListener("scroll", handleScroll);
359
+ document.addEventListener("mousedown", handleClickOutside);
332
360
  return () => {
333
361
  window.removeEventListener("resize", handleResize);
334
362
  window.removeEventListener("scroll", handleScroll);
363
+ document.removeEventListener("mousedown", handleClickOutside);
335
364
  };
336
365
  }, []);
337
366
  (0, import_react2.useEffect)(() => {
@@ -425,8 +454,32 @@ var Navbar = ({
425
454
  }
426
455
  }
427
456
  };
457
+ const ActionItem = ({ id, icon: Icon, count, clickHandler, contentNode }) => {
458
+ const isActive = activePopover === id;
459
+ const handleActionClick = (e) => {
460
+ if (clickHandler) clickHandler(e);
461
+ if (contentNode) {
462
+ setActivePopover(isActive ? null : id);
463
+ }
464
+ };
465
+ return /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.actionItemWrapper }, /* @__PURE__ */ import_react2.default.createElement(
466
+ "div",
467
+ {
468
+ style: { ...styles.iconBtn, color: isActive ? accentColor : textMain },
469
+ onClick: handleActionClick,
470
+ onMouseEnter: (e) => {
471
+ if (!isActive) e.currentTarget.style.color = accentColor;
472
+ },
473
+ onMouseLeave: (e) => {
474
+ if (!isActive) e.currentTarget.style.color = textMain;
475
+ }
476
+ },
477
+ /* @__PURE__ */ import_react2.default.createElement(Icon, null),
478
+ count > 0 && /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.actionBadge }, count)
479
+ ), contentNode && isActive && /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.actionPopover }, contentNode));
480
+ };
428
481
  const showHamburger = isMobile || variant === "overlay";
429
- const showDesktopLinks = variant === "classic" && !isMobile;
482
+ const showDesktopLinks = (variant === "classic" || variant === "product") && !isMobile;
430
483
  const styles = {
431
484
  header: {
432
485
  position: "fixed",
@@ -472,7 +525,9 @@ var Navbar = ({
472
525
  flex: 1,
473
526
  justifyContent: "center",
474
527
  alignItems: "center",
475
- gap: "30px"
528
+ gap: "30px",
529
+ // If product variant, we might shift alignment slightly to balance the bulky right actions
530
+ marginRight: variant === "product" ? "-50px" : "0px"
476
531
  },
477
532
  desktopLinkWrapper: {
478
533
  position: "relative",
@@ -482,7 +537,8 @@ var Navbar = ({
482
537
  color: textMain,
483
538
  textDecoration: "none",
484
539
  fontSize: "15px",
485
- fontWeight: "600",
540
+ fontWeight: variant === "product" ? "500" : "600",
541
+ // slightly more elegant in product mode
486
542
  cursor: "pointer",
487
543
  display: "flex",
488
544
  alignItems: "center",
@@ -505,7 +561,8 @@ var Navbar = ({
505
561
  pointerEvents: "none",
506
562
  display: "flex",
507
563
  flexDirection: "column",
508
- gap: "4px"
564
+ gap: "4px",
565
+ zIndex: 1002
509
566
  },
510
567
  dropdownItem: {
511
568
  padding: "12px 16px",
@@ -516,22 +573,28 @@ var Navbar = ({
516
573
  fontWeight: "500",
517
574
  transition: "background-color 0.2s, color 0.2s"
518
575
  },
519
- rightActions: {
576
+ rightActionsGroup: {
520
577
  display: "flex",
521
578
  alignItems: "center",
522
- gap: "20px",
579
+ gap: variant === "product" ? "24px" : "20px",
580
+ // More spacious in product mode
523
581
  zIndex: 1001
524
582
  },
583
+ actionItemWrapper: {
584
+ position: "relative",
585
+ display: "flex",
586
+ alignItems: "center",
587
+ justifyContent: "center"
588
+ },
525
589
  iconBtn: {
526
590
  fontSize: "22px",
527
591
  color: textMain,
528
592
  cursor: "pointer",
529
593
  display: "flex",
530
594
  alignItems: "center",
531
- position: "relative",
532
595
  transition: "transform 0.2s ease, color 0.2s ease"
533
596
  },
534
- cartBadge: {
597
+ actionBadge: {
535
598
  position: "absolute",
536
599
  top: "-6px",
537
600
  right: "-8px",
@@ -545,7 +608,23 @@ var Navbar = ({
545
608
  display: "flex",
546
609
  justifyContent: "center",
547
610
  alignItems: "center",
548
- padding: "0 4px"
611
+ padding: "0 4px",
612
+ pointerEvents: "none"
613
+ },
614
+ actionPopover: {
615
+ position: "absolute",
616
+ top: "200%",
617
+ right: 0,
618
+ backgroundColor: bgMain,
619
+ border: `1px solid ${borderCol}`,
620
+ borderRadius: "16px",
621
+ boxShadow: "0 20px 40px rgba(0,0,0,0.1)",
622
+ minWidth: "250px",
623
+ zIndex: 1002,
624
+ display: "flex",
625
+ flexDirection: "column",
626
+ overflow: "hidden"
627
+ // Keeps rounded corners clean around injected content
549
628
  },
550
629
  hamburgerBtn: {
551
630
  position: "relative",
@@ -559,6 +638,7 @@ var Navbar = ({
559
638
  alignItems: "center",
560
639
  gap: "6px",
561
640
  cursor: "pointer",
641
+ marginLeft: showSearch || showCart || showUser || showNotification ? "10px" : "0",
562
642
  border: `1px solid ${isOpen ? borderCol : "transparent"}`,
563
643
  transition: "all 0.4s ease"
564
644
  },
@@ -587,8 +667,9 @@ var Navbar = ({
587
667
  padding: isMobile ? "120px 8% 60px" : "100px 10%",
588
668
  boxSizing: "border-box",
589
669
  fontFamily: '"Inter", -apple-system, sans-serif',
670
+ // We use overflowY: auto so items CAN scroll on mobile,
671
+ // but rely on .aura-no-scroll to hide the ugly scrollbar track globally!
590
672
  overflowY: isMobile ? "auto" : "none"
591
- // Prevent scroll lock bugs on desktop
592
673
  },
593
674
  linksArea: {
594
675
  display: "flex",
@@ -680,7 +761,7 @@ var Navbar = ({
680
761
  transition: "all 0.3s ease"
681
762
  }
682
763
  };
683
- return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("header", { style: styles.header }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logo, onClick: (e) => handleNavigation("/", e) }, showBadge && /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText), showDesktopLinks && /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.desktopNav }, links.map((link, idx) => /* @__PURE__ */ import_react2.default.createElement(
764
+ return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("style", null, SCROLLBAR_STYLE), /* @__PURE__ */ import_react2.default.createElement("header", { style: styles.header }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logo, onClick: (e) => handleNavigation("/", e) }, showBadge && /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText), showDesktopLinks && /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.desktopNav }, links.map((link, idx) => /* @__PURE__ */ import_react2.default.createElement(
684
765
  "div",
685
766
  {
686
767
  key: idx,
@@ -725,34 +806,40 @@ var Navbar = ({
725
806
  child.label
726
807
  ))
727
808
  )
728
- ))), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.rightActions }, showSearch && /* @__PURE__ */ import_react2.default.createElement(
729
- "div",
809
+ ))), /* @__PURE__ */ import_react2.default.createElement("div", { ref: rightActionsRef, style: styles.rightActionsGroup }, showSearch && /* @__PURE__ */ import_react2.default.createElement(
810
+ ActionItem,
730
811
  {
731
- style: styles.iconBtn,
732
- onClick: onSearch,
733
- onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
734
- onMouseLeave: (e) => e.currentTarget.style.color = textMain
735
- },
736
- /* @__PURE__ */ import_react2.default.createElement(import_fi.FiSearch, null)
812
+ id: "search",
813
+ icon: import_fi.FiSearch,
814
+ clickHandler: onSearch,
815
+ contentNode: searchContent
816
+ }
817
+ ), showNotification && /* @__PURE__ */ import_react2.default.createElement(
818
+ ActionItem,
819
+ {
820
+ id: "bell",
821
+ icon: import_fi.FiBell,
822
+ count: notificationCount,
823
+ clickHandler: onNotificationClick,
824
+ contentNode: notificationContent
825
+ }
737
826
  ), showUser && /* @__PURE__ */ import_react2.default.createElement(
738
- "div",
827
+ ActionItem,
739
828
  {
740
- style: styles.iconBtn,
741
- onClick: onUserClick,
742
- onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
743
- onMouseLeave: (e) => e.currentTarget.style.color = textMain
744
- },
745
- /* @__PURE__ */ import_react2.default.createElement(import_fi.FiUser, null)
829
+ id: "user",
830
+ icon: import_fi.FiUser,
831
+ clickHandler: onUserClick,
832
+ contentNode: userContent
833
+ }
746
834
  ), showCart && /* @__PURE__ */ import_react2.default.createElement(
747
- "div",
835
+ ActionItem,
748
836
  {
749
- style: styles.iconBtn,
750
- onClick: onCartClick,
751
- onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
752
- onMouseLeave: (e) => e.currentTarget.style.color = textMain
753
- },
754
- /* @__PURE__ */ import_react2.default.createElement(import_fi.FiShoppingBag, null),
755
- cartCount > 0 && /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.cartBadge }, cartCount)
837
+ id: "cart",
838
+ icon: import_fi.FiShoppingBag,
839
+ count: cartCount,
840
+ clickHandler: onCartClick,
841
+ contentNode: cartContent
842
+ }
756
843
  ), showHamburger && /* @__PURE__ */ import_react2.default.createElement(
757
844
  "div",
758
845
  {
@@ -773,101 +860,110 @@ var Navbar = ({
773
860
  },
774
861
  /* @__PURE__ */ import_react2.default.createElement("div", { style: { ...styles.line, transform: isOpen ? "translateY(4px) rotate(45deg)" : "none" } }),
775
862
  /* @__PURE__ */ import_react2.default.createElement("div", { style: { ...styles.line, transform: isOpen ? "translateY(-4px) rotate(-45deg)" : "none" } })
776
- ))), /* @__PURE__ */ import_react2.default.createElement("div", { ref: overlayRef, style: styles.overlay }, /* @__PURE__ */ import_react2.default.createElement("div", { ref: linksContainerRef, style: styles.linksArea }, links.map((link, idx) => {
777
- const isHovered = hoverIndex === idx;
778
- const isAnyHovered = hoverIndex !== null;
779
- const isActiveRoute = location.pathname === link.path;
780
- const isExpanded = expandedOverlay === idx;
781
- return /* @__PURE__ */ import_react2.default.createElement("div", { key: idx, style: styles.overlayLinkItem }, /* @__PURE__ */ import_react2.default.createElement(
782
- "a",
783
- {
784
- href: link.path,
785
- onClick: (e) => {
786
- if (link.children) {
787
- e.preventDefault();
788
- setExpandedOverlay(isExpanded ? null : idx);
789
- } else {
790
- handleNavigation(link.path, e);
791
- }
792
- },
793
- onMouseEnter: () => setHoverIndex(idx),
794
- onMouseLeave: () => setHoverIndex(null),
795
- style: styles.overlayLinkMain
796
- },
797
- /* @__PURE__ */ import_react2.default.createElement("span", { style: {
798
- ...styles.linkText,
799
- color: isHovered || isActiveRoute ? accentColor : textMain,
800
- opacity: isAnyHovered && !isHovered ? 0.3 : 1,
801
- transform: isHovered || isActiveRoute ? "translateX(20px)" : "translateX(0px)",
802
- transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
803
- } }, link.label),
804
- link.children ? /* @__PURE__ */ import_react2.default.createElement(
805
- import_fi.FiChevronDown,
863
+ ))), /* @__PURE__ */ import_react2.default.createElement(
864
+ "div",
865
+ {
866
+ ref: overlayRef,
867
+ style: styles.overlay,
868
+ className: "aura-no-scroll"
869
+ },
870
+ /* @__PURE__ */ import_react2.default.createElement("div", { ref: linksContainerRef, style: styles.linksArea }, links.map((link, idx) => {
871
+ const isHovered = hoverIndex === idx;
872
+ const isAnyHovered = hoverIndex !== null;
873
+ const isActiveRoute = location.pathname === link.path;
874
+ const isExpanded = expandedOverlay === idx;
875
+ return /* @__PURE__ */ import_react2.default.createElement("div", { key: idx, style: styles.overlayLinkItem }, /* @__PURE__ */ import_react2.default.createElement(
876
+ "a",
806
877
  {
807
- style: {
808
- fontSize: "clamp(24px, 3vw, 40px)",
809
- color: accentColor,
810
- opacity: isHovered ? 1 : 0,
811
- transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
812
- transition: "all 0.5s ease"
878
+ href: link.path,
879
+ onClick: (e) => {
880
+ if (link.children) {
881
+ e.preventDefault();
882
+ setExpandedOverlay(isExpanded ? null : idx);
883
+ } else {
884
+ handleNavigation(link.path, e);
885
+ }
886
+ },
887
+ onMouseEnter: () => setHoverIndex(idx),
888
+ onMouseLeave: () => setHoverIndex(null),
889
+ style: styles.overlayLinkMain
890
+ },
891
+ /* @__PURE__ */ import_react2.default.createElement("span", { style: {
892
+ ...styles.linkText,
893
+ color: isHovered || isActiveRoute ? accentColor : textMain,
894
+ opacity: isAnyHovered && !isHovered ? 0.3 : 1,
895
+ transform: isHovered || isActiveRoute ? "translateX(20px)" : "translateX(0px)",
896
+ transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
897
+ } }, link.label),
898
+ link.children ? /* @__PURE__ */ import_react2.default.createElement(
899
+ import_fi.FiChevronDown,
900
+ {
901
+ style: {
902
+ fontSize: "clamp(24px, 3vw, 40px)",
903
+ color: accentColor,
904
+ opacity: isHovered ? 1 : 0,
905
+ transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
906
+ transition: "all 0.5s ease"
907
+ }
813
908
  }
814
- }
815
- ) : /* @__PURE__ */ import_react2.default.createElement(
816
- import_fi.FiArrowUpRight,
909
+ ) : /* @__PURE__ */ import_react2.default.createElement(
910
+ import_fi.FiArrowUpRight,
911
+ {
912
+ style: {
913
+ fontSize: "clamp(30px, 4vw, 60px)",
914
+ color: accentColor,
915
+ opacity: isHovered || isActiveRoute ? 1 : 0,
916
+ transform: isHovered || isActiveRoute ? "translate(0px, 0px)" : "translate(-20px, 20px)",
917
+ transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
918
+ }
919
+ }
920
+ )
921
+ ), link.children && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
922
+ ...styles.accordionContent,
923
+ maxHeight: isExpanded ? "500px" : "0px",
924
+ opacity: isExpanded ? 1 : 0,
925
+ transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
926
+ } }, link.children.map((child, cIdx) => /* @__PURE__ */ import_react2.default.createElement(
927
+ "a",
817
928
  {
818
- style: {
819
- fontSize: "clamp(30px, 4vw, 60px)",
820
- color: accentColor,
821
- opacity: isHovered || isActiveRoute ? 1 : 0,
822
- transform: isHovered || isActiveRoute ? "translate(0px, 0px)" : "translate(-20px, 20px)",
823
- transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
929
+ key: cIdx,
930
+ href: child.path,
931
+ onClick: (e) => handleNavigation(child.path, e),
932
+ style: styles.accordionLink,
933
+ onMouseEnter: (e) => {
934
+ e.currentTarget.style.color = accentColor;
935
+ e.currentTarget.style.paddingLeft = "10px";
936
+ },
937
+ onMouseLeave: (e) => {
938
+ e.currentTarget.style.color = textMuted;
939
+ e.currentTarget.style.paddingLeft = "0px";
824
940
  }
825
- }
826
- )
827
- ), link.children && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
828
- ...styles.accordionContent,
829
- maxHeight: isExpanded ? "500px" : "0px",
830
- opacity: isExpanded ? 1 : 0,
831
- transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
832
- } }, link.children.map((child, cIdx) => /* @__PURE__ */ import_react2.default.createElement(
941
+ },
942
+ child.label
943
+ ))));
944
+ })),
945
+ /* @__PURE__ */ import_react2.default.createElement("div", { ref: infoContainerRef, style: styles.infoArea }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoLabel }, contact.title), /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoText }, contact.email), /* @__PURE__ */ import_react2.default.createElement("span", { style: { ...styles.infoText, color: textMuted } }, contact.address)), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoLabel }, "Socials"), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.socialGrid }, socials.map((social, idx) => /* @__PURE__ */ import_react2.default.createElement(
833
946
  "a",
834
947
  {
835
- key: cIdx,
836
- href: child.path,
837
- onClick: (e) => handleNavigation(child.path, e),
838
- style: styles.accordionLink,
948
+ key: idx,
949
+ href: social.path,
950
+ style: styles.socialLink,
839
951
  onMouseEnter: (e) => {
952
+ e.currentTarget.style.borderColor = accentColor;
953
+ e.currentTarget.style.backgroundColor = `${accentColor}11`;
840
954
  e.currentTarget.style.color = accentColor;
841
- e.currentTarget.style.paddingLeft = "10px";
842
955
  },
843
956
  onMouseLeave: (e) => {
844
- e.currentTarget.style.color = textMuted;
845
- e.currentTarget.style.paddingLeft = "0px";
957
+ e.currentTarget.style.borderColor = borderCol;
958
+ e.currentTarget.style.backgroundColor = "transparent";
959
+ e.currentTarget.style.color = textMain;
846
960
  }
847
961
  },
848
- child.label
849
- ))));
850
- })), /* @__PURE__ */ import_react2.default.createElement("div", { ref: infoContainerRef, style: styles.infoArea }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoLabel }, contact.title), /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoText }, contact.email), /* @__PURE__ */ import_react2.default.createElement("span", { style: { ...styles.infoText, color: textMuted } }, contact.address)), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoLabel }, "Socials"), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.socialGrid }, socials.map((social, idx) => /* @__PURE__ */ import_react2.default.createElement(
851
- "a",
852
- {
853
- key: idx,
854
- href: social.path,
855
- style: styles.socialLink,
856
- onMouseEnter: (e) => {
857
- e.currentTarget.style.borderColor = accentColor;
858
- e.currentTarget.style.backgroundColor = `${accentColor}11`;
859
- e.currentTarget.style.color = accentColor;
860
- },
861
- onMouseLeave: (e) => {
862
- e.currentTarget.style.borderColor = borderCol;
863
- e.currentTarget.style.backgroundColor = "transparent";
864
- e.currentTarget.style.color = textMain;
865
- }
866
- },
867
- social.icon,
868
- " ",
869
- social.label
870
- )))))));
962
+ social.icon,
963
+ " ",
964
+ social.label
965
+ )))))
966
+ ));
871
967
  };
872
968
 
873
969
  // src/components/Spotlight/Spotlight.jsx
package/dist/index.mjs CHANGED
@@ -207,13 +207,23 @@ import {
207
207
  FiSearch,
208
208
  FiShoppingBag,
209
209
  FiUser,
210
+ FiBell,
210
211
  FiChevronDown
211
212
  } from "react-icons/fi";
213
+ var SCROLLBAR_STYLE = `
214
+ .aura-no-scroll::-webkit-scrollbar {
215
+ display: none;
216
+ }
217
+ .aura-no-scroll {
218
+ -ms-overflow-style: none;
219
+ scrollbar-width: none;
220
+ }
221
+ `;
212
222
  var Navbar = ({
213
223
  logoText = "AURA",
214
224
  showBadge = true,
215
225
  variant = "overlay",
216
- // "overlay" | "classic"
226
+ // "overlay" | "classic" | "product"
217
227
  links = [
218
228
  { label: "Home", path: "/" },
219
229
  {
@@ -238,14 +248,25 @@ var Navbar = ({
238
248
  email: "hello@aura-ui.dev",
239
249
  address: "123 Innovation Drive, SF"
240
250
  },
241
- // E-commerce Triggers
251
+ // E-commerce & Action Triggers
242
252
  showSearch = false,
243
- onSearch = () => console.log("Search clicked"),
253
+ onSearch = null,
254
+ searchContent = null,
255
+ // React Node rendered inside popover
244
256
  showCart = false,
245
257
  cartCount = 0,
246
- onCartClick = () => console.log("Cart clicked"),
258
+ onCartClick = null,
259
+ cartContent = null,
260
+ // React Node rendered inside popover
247
261
  showUser = false,
248
- onUserClick = () => console.log("User clicked"),
262
+ onUserClick = null,
263
+ userContent = null,
264
+ // React Node rendered inside popover
265
+ showNotification = false,
266
+ notificationCount = 0,
267
+ onNotificationClick = null,
268
+ notificationContent = null,
269
+ // React Node rendered inside popover
249
270
  // Theme & Styling
250
271
  accentColor = "#6366f1",
251
272
  theme = "dark",
@@ -261,6 +282,7 @@ var Navbar = ({
261
282
  const [isMobile, setIsMobile] = useState(false);
262
283
  const [hoverIndex, setHoverIndex] = useState(null);
263
284
  const [expandedOverlay, setExpandedOverlay] = useState(null);
285
+ const [activePopover, setActivePopover] = useState(null);
264
286
  const inRouter = useInRouterContext2();
265
287
  const navigate = inRouter ? useNavigate2() : null;
266
288
  const location = inRouter ? useLocation() : { pathname: "/" };
@@ -268,6 +290,7 @@ var Navbar = ({
268
290
  const linksContainerRef = useRef2(null);
269
291
  const infoContainerRef = useRef2(null);
270
292
  const desktopDropdownRefs = useRef2({});
293
+ const rightActionsRef = useRef2(null);
271
294
  const isLight2 = theme === "light";
272
295
  const bgMain = isLight2 ? "#ffffff" : "#050505";
273
296
  const textMain = isLight2 ? "#0f172a" : "#ffffff";
@@ -279,12 +302,19 @@ var Navbar = ({
279
302
  useEffect2(() => {
280
303
  const handleResize = () => setIsMobile(window.innerWidth < 1024);
281
304
  const handleScroll = () => setIsScrolled(window.scrollY > 50);
305
+ const handleClickOutside = (e) => {
306
+ if (rightActionsRef.current && !rightActionsRef.current.contains(e.target)) {
307
+ setActivePopover(null);
308
+ }
309
+ };
282
310
  handleResize();
283
311
  window.addEventListener("resize", handleResize);
284
312
  window.addEventListener("scroll", handleScroll);
313
+ document.addEventListener("mousedown", handleClickOutside);
285
314
  return () => {
286
315
  window.removeEventListener("resize", handleResize);
287
316
  window.removeEventListener("scroll", handleScroll);
317
+ document.removeEventListener("mousedown", handleClickOutside);
288
318
  };
289
319
  }, []);
290
320
  useEffect2(() => {
@@ -378,8 +408,32 @@ var Navbar = ({
378
408
  }
379
409
  }
380
410
  };
411
+ const ActionItem = ({ id, icon: Icon, count, clickHandler, contentNode }) => {
412
+ const isActive = activePopover === id;
413
+ const handleActionClick = (e) => {
414
+ if (clickHandler) clickHandler(e);
415
+ if (contentNode) {
416
+ setActivePopover(isActive ? null : id);
417
+ }
418
+ };
419
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.actionItemWrapper }, /* @__PURE__ */ React2.createElement(
420
+ "div",
421
+ {
422
+ style: { ...styles.iconBtn, color: isActive ? accentColor : textMain },
423
+ onClick: handleActionClick,
424
+ onMouseEnter: (e) => {
425
+ if (!isActive) e.currentTarget.style.color = accentColor;
426
+ },
427
+ onMouseLeave: (e) => {
428
+ if (!isActive) e.currentTarget.style.color = textMain;
429
+ }
430
+ },
431
+ /* @__PURE__ */ React2.createElement(Icon, null),
432
+ count > 0 && /* @__PURE__ */ React2.createElement("span", { style: styles.actionBadge }, count)
433
+ ), contentNode && isActive && /* @__PURE__ */ React2.createElement("div", { style: styles.actionPopover }, contentNode));
434
+ };
381
435
  const showHamburger = isMobile || variant === "overlay";
382
- const showDesktopLinks = variant === "classic" && !isMobile;
436
+ const showDesktopLinks = (variant === "classic" || variant === "product") && !isMobile;
383
437
  const styles = {
384
438
  header: {
385
439
  position: "fixed",
@@ -425,7 +479,9 @@ var Navbar = ({
425
479
  flex: 1,
426
480
  justifyContent: "center",
427
481
  alignItems: "center",
428
- gap: "30px"
482
+ gap: "30px",
483
+ // If product variant, we might shift alignment slightly to balance the bulky right actions
484
+ marginRight: variant === "product" ? "-50px" : "0px"
429
485
  },
430
486
  desktopLinkWrapper: {
431
487
  position: "relative",
@@ -435,7 +491,8 @@ var Navbar = ({
435
491
  color: textMain,
436
492
  textDecoration: "none",
437
493
  fontSize: "15px",
438
- fontWeight: "600",
494
+ fontWeight: variant === "product" ? "500" : "600",
495
+ // slightly more elegant in product mode
439
496
  cursor: "pointer",
440
497
  display: "flex",
441
498
  alignItems: "center",
@@ -458,7 +515,8 @@ var Navbar = ({
458
515
  pointerEvents: "none",
459
516
  display: "flex",
460
517
  flexDirection: "column",
461
- gap: "4px"
518
+ gap: "4px",
519
+ zIndex: 1002
462
520
  },
463
521
  dropdownItem: {
464
522
  padding: "12px 16px",
@@ -469,22 +527,28 @@ var Navbar = ({
469
527
  fontWeight: "500",
470
528
  transition: "background-color 0.2s, color 0.2s"
471
529
  },
472
- rightActions: {
530
+ rightActionsGroup: {
473
531
  display: "flex",
474
532
  alignItems: "center",
475
- gap: "20px",
533
+ gap: variant === "product" ? "24px" : "20px",
534
+ // More spacious in product mode
476
535
  zIndex: 1001
477
536
  },
537
+ actionItemWrapper: {
538
+ position: "relative",
539
+ display: "flex",
540
+ alignItems: "center",
541
+ justifyContent: "center"
542
+ },
478
543
  iconBtn: {
479
544
  fontSize: "22px",
480
545
  color: textMain,
481
546
  cursor: "pointer",
482
547
  display: "flex",
483
548
  alignItems: "center",
484
- position: "relative",
485
549
  transition: "transform 0.2s ease, color 0.2s ease"
486
550
  },
487
- cartBadge: {
551
+ actionBadge: {
488
552
  position: "absolute",
489
553
  top: "-6px",
490
554
  right: "-8px",
@@ -498,7 +562,23 @@ var Navbar = ({
498
562
  display: "flex",
499
563
  justifyContent: "center",
500
564
  alignItems: "center",
501
- padding: "0 4px"
565
+ padding: "0 4px",
566
+ pointerEvents: "none"
567
+ },
568
+ actionPopover: {
569
+ position: "absolute",
570
+ top: "200%",
571
+ right: 0,
572
+ backgroundColor: bgMain,
573
+ border: `1px solid ${borderCol}`,
574
+ borderRadius: "16px",
575
+ boxShadow: "0 20px 40px rgba(0,0,0,0.1)",
576
+ minWidth: "250px",
577
+ zIndex: 1002,
578
+ display: "flex",
579
+ flexDirection: "column",
580
+ overflow: "hidden"
581
+ // Keeps rounded corners clean around injected content
502
582
  },
503
583
  hamburgerBtn: {
504
584
  position: "relative",
@@ -512,6 +592,7 @@ var Navbar = ({
512
592
  alignItems: "center",
513
593
  gap: "6px",
514
594
  cursor: "pointer",
595
+ marginLeft: showSearch || showCart || showUser || showNotification ? "10px" : "0",
515
596
  border: `1px solid ${isOpen ? borderCol : "transparent"}`,
516
597
  transition: "all 0.4s ease"
517
598
  },
@@ -540,8 +621,9 @@ var Navbar = ({
540
621
  padding: isMobile ? "120px 8% 60px" : "100px 10%",
541
622
  boxSizing: "border-box",
542
623
  fontFamily: '"Inter", -apple-system, sans-serif',
624
+ // We use overflowY: auto so items CAN scroll on mobile,
625
+ // but rely on .aura-no-scroll to hide the ugly scrollbar track globally!
543
626
  overflowY: isMobile ? "auto" : "none"
544
- // Prevent scroll lock bugs on desktop
545
627
  },
546
628
  linksArea: {
547
629
  display: "flex",
@@ -633,7 +715,7 @@ var Navbar = ({
633
715
  transition: "all 0.3s ease"
634
716
  }
635
717
  };
636
- return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("header", { style: styles.header }, /* @__PURE__ */ React2.createElement("div", { style: styles.logo, onClick: (e) => handleNavigation("/", e) }, showBadge && /* @__PURE__ */ React2.createElement("div", { style: styles.logoDot }), logoText), showDesktopLinks && /* @__PURE__ */ React2.createElement("div", { style: styles.desktopNav }, links.map((link, idx) => /* @__PURE__ */ React2.createElement(
718
+ return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("style", null, SCROLLBAR_STYLE), /* @__PURE__ */ React2.createElement("header", { style: styles.header }, /* @__PURE__ */ React2.createElement("div", { style: styles.logo, onClick: (e) => handleNavigation("/", e) }, showBadge && /* @__PURE__ */ React2.createElement("div", { style: styles.logoDot }), logoText), showDesktopLinks && /* @__PURE__ */ React2.createElement("div", { style: styles.desktopNav }, links.map((link, idx) => /* @__PURE__ */ React2.createElement(
637
719
  "div",
638
720
  {
639
721
  key: idx,
@@ -678,34 +760,40 @@ var Navbar = ({
678
760
  child.label
679
761
  ))
680
762
  )
681
- ))), /* @__PURE__ */ React2.createElement("div", { style: styles.rightActions }, showSearch && /* @__PURE__ */ React2.createElement(
682
- "div",
763
+ ))), /* @__PURE__ */ React2.createElement("div", { ref: rightActionsRef, style: styles.rightActionsGroup }, showSearch && /* @__PURE__ */ React2.createElement(
764
+ ActionItem,
683
765
  {
684
- style: styles.iconBtn,
685
- onClick: onSearch,
686
- onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
687
- onMouseLeave: (e) => e.currentTarget.style.color = textMain
688
- },
689
- /* @__PURE__ */ React2.createElement(FiSearch, null)
766
+ id: "search",
767
+ icon: FiSearch,
768
+ clickHandler: onSearch,
769
+ contentNode: searchContent
770
+ }
771
+ ), showNotification && /* @__PURE__ */ React2.createElement(
772
+ ActionItem,
773
+ {
774
+ id: "bell",
775
+ icon: FiBell,
776
+ count: notificationCount,
777
+ clickHandler: onNotificationClick,
778
+ contentNode: notificationContent
779
+ }
690
780
  ), showUser && /* @__PURE__ */ React2.createElement(
691
- "div",
781
+ ActionItem,
692
782
  {
693
- style: styles.iconBtn,
694
- onClick: onUserClick,
695
- onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
696
- onMouseLeave: (e) => e.currentTarget.style.color = textMain
697
- },
698
- /* @__PURE__ */ React2.createElement(FiUser, null)
783
+ id: "user",
784
+ icon: FiUser,
785
+ clickHandler: onUserClick,
786
+ contentNode: userContent
787
+ }
699
788
  ), showCart && /* @__PURE__ */ React2.createElement(
700
- "div",
789
+ ActionItem,
701
790
  {
702
- style: styles.iconBtn,
703
- onClick: onCartClick,
704
- onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
705
- onMouseLeave: (e) => e.currentTarget.style.color = textMain
706
- },
707
- /* @__PURE__ */ React2.createElement(FiShoppingBag, null),
708
- cartCount > 0 && /* @__PURE__ */ React2.createElement("span", { style: styles.cartBadge }, cartCount)
791
+ id: "cart",
792
+ icon: FiShoppingBag,
793
+ count: cartCount,
794
+ clickHandler: onCartClick,
795
+ contentNode: cartContent
796
+ }
709
797
  ), showHamburger && /* @__PURE__ */ React2.createElement(
710
798
  "div",
711
799
  {
@@ -726,101 +814,110 @@ var Navbar = ({
726
814
  },
727
815
  /* @__PURE__ */ React2.createElement("div", { style: { ...styles.line, transform: isOpen ? "translateY(4px) rotate(45deg)" : "none" } }),
728
816
  /* @__PURE__ */ React2.createElement("div", { style: { ...styles.line, transform: isOpen ? "translateY(-4px) rotate(-45deg)" : "none" } })
729
- ))), /* @__PURE__ */ React2.createElement("div", { ref: overlayRef, style: styles.overlay }, /* @__PURE__ */ React2.createElement("div", { ref: linksContainerRef, style: styles.linksArea }, links.map((link, idx) => {
730
- const isHovered = hoverIndex === idx;
731
- const isAnyHovered = hoverIndex !== null;
732
- const isActiveRoute = location.pathname === link.path;
733
- const isExpanded = expandedOverlay === idx;
734
- return /* @__PURE__ */ React2.createElement("div", { key: idx, style: styles.overlayLinkItem }, /* @__PURE__ */ React2.createElement(
735
- "a",
736
- {
737
- href: link.path,
738
- onClick: (e) => {
739
- if (link.children) {
740
- e.preventDefault();
741
- setExpandedOverlay(isExpanded ? null : idx);
742
- } else {
743
- handleNavigation(link.path, e);
744
- }
745
- },
746
- onMouseEnter: () => setHoverIndex(idx),
747
- onMouseLeave: () => setHoverIndex(null),
748
- style: styles.overlayLinkMain
749
- },
750
- /* @__PURE__ */ React2.createElement("span", { style: {
751
- ...styles.linkText,
752
- color: isHovered || isActiveRoute ? accentColor : textMain,
753
- opacity: isAnyHovered && !isHovered ? 0.3 : 1,
754
- transform: isHovered || isActiveRoute ? "translateX(20px)" : "translateX(0px)",
755
- transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
756
- } }, link.label),
757
- link.children ? /* @__PURE__ */ React2.createElement(
758
- FiChevronDown,
817
+ ))), /* @__PURE__ */ React2.createElement(
818
+ "div",
819
+ {
820
+ ref: overlayRef,
821
+ style: styles.overlay,
822
+ className: "aura-no-scroll"
823
+ },
824
+ /* @__PURE__ */ React2.createElement("div", { ref: linksContainerRef, style: styles.linksArea }, links.map((link, idx) => {
825
+ const isHovered = hoverIndex === idx;
826
+ const isAnyHovered = hoverIndex !== null;
827
+ const isActiveRoute = location.pathname === link.path;
828
+ const isExpanded = expandedOverlay === idx;
829
+ return /* @__PURE__ */ React2.createElement("div", { key: idx, style: styles.overlayLinkItem }, /* @__PURE__ */ React2.createElement(
830
+ "a",
759
831
  {
760
- style: {
761
- fontSize: "clamp(24px, 3vw, 40px)",
762
- color: accentColor,
763
- opacity: isHovered ? 1 : 0,
764
- transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
765
- transition: "all 0.5s ease"
832
+ href: link.path,
833
+ onClick: (e) => {
834
+ if (link.children) {
835
+ e.preventDefault();
836
+ setExpandedOverlay(isExpanded ? null : idx);
837
+ } else {
838
+ handleNavigation(link.path, e);
839
+ }
840
+ },
841
+ onMouseEnter: () => setHoverIndex(idx),
842
+ onMouseLeave: () => setHoverIndex(null),
843
+ style: styles.overlayLinkMain
844
+ },
845
+ /* @__PURE__ */ React2.createElement("span", { style: {
846
+ ...styles.linkText,
847
+ color: isHovered || isActiveRoute ? accentColor : textMain,
848
+ opacity: isAnyHovered && !isHovered ? 0.3 : 1,
849
+ transform: isHovered || isActiveRoute ? "translateX(20px)" : "translateX(0px)",
850
+ transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
851
+ } }, link.label),
852
+ link.children ? /* @__PURE__ */ React2.createElement(
853
+ FiChevronDown,
854
+ {
855
+ style: {
856
+ fontSize: "clamp(24px, 3vw, 40px)",
857
+ color: accentColor,
858
+ opacity: isHovered ? 1 : 0,
859
+ transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
860
+ transition: "all 0.5s ease"
861
+ }
766
862
  }
767
- }
768
- ) : /* @__PURE__ */ React2.createElement(
769
- FiArrowUpRight,
863
+ ) : /* @__PURE__ */ React2.createElement(
864
+ FiArrowUpRight,
865
+ {
866
+ style: {
867
+ fontSize: "clamp(30px, 4vw, 60px)",
868
+ color: accentColor,
869
+ opacity: isHovered || isActiveRoute ? 1 : 0,
870
+ transform: isHovered || isActiveRoute ? "translate(0px, 0px)" : "translate(-20px, 20px)",
871
+ transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
872
+ }
873
+ }
874
+ )
875
+ ), link.children && /* @__PURE__ */ React2.createElement("div", { style: {
876
+ ...styles.accordionContent,
877
+ maxHeight: isExpanded ? "500px" : "0px",
878
+ opacity: isExpanded ? 1 : 0,
879
+ transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
880
+ } }, link.children.map((child, cIdx) => /* @__PURE__ */ React2.createElement(
881
+ "a",
770
882
  {
771
- style: {
772
- fontSize: "clamp(30px, 4vw, 60px)",
773
- color: accentColor,
774
- opacity: isHovered || isActiveRoute ? 1 : 0,
775
- transform: isHovered || isActiveRoute ? "translate(0px, 0px)" : "translate(-20px, 20px)",
776
- transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
883
+ key: cIdx,
884
+ href: child.path,
885
+ onClick: (e) => handleNavigation(child.path, e),
886
+ style: styles.accordionLink,
887
+ onMouseEnter: (e) => {
888
+ e.currentTarget.style.color = accentColor;
889
+ e.currentTarget.style.paddingLeft = "10px";
890
+ },
891
+ onMouseLeave: (e) => {
892
+ e.currentTarget.style.color = textMuted;
893
+ e.currentTarget.style.paddingLeft = "0px";
777
894
  }
778
- }
779
- )
780
- ), link.children && /* @__PURE__ */ React2.createElement("div", { style: {
781
- ...styles.accordionContent,
782
- maxHeight: isExpanded ? "500px" : "0px",
783
- opacity: isExpanded ? 1 : 0,
784
- transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
785
- } }, link.children.map((child, cIdx) => /* @__PURE__ */ React2.createElement(
895
+ },
896
+ child.label
897
+ ))));
898
+ })),
899
+ /* @__PURE__ */ React2.createElement("div", { ref: infoContainerRef, style: styles.infoArea }, /* @__PURE__ */ React2.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ React2.createElement("span", { style: styles.infoLabel }, contact.title), /* @__PURE__ */ React2.createElement("span", { style: styles.infoText }, contact.email), /* @__PURE__ */ React2.createElement("span", { style: { ...styles.infoText, color: textMuted } }, contact.address)), /* @__PURE__ */ React2.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ React2.createElement("span", { style: styles.infoLabel }, "Socials"), /* @__PURE__ */ React2.createElement("div", { style: styles.socialGrid }, socials.map((social, idx) => /* @__PURE__ */ React2.createElement(
786
900
  "a",
787
901
  {
788
- key: cIdx,
789
- href: child.path,
790
- onClick: (e) => handleNavigation(child.path, e),
791
- style: styles.accordionLink,
902
+ key: idx,
903
+ href: social.path,
904
+ style: styles.socialLink,
792
905
  onMouseEnter: (e) => {
906
+ e.currentTarget.style.borderColor = accentColor;
907
+ e.currentTarget.style.backgroundColor = `${accentColor}11`;
793
908
  e.currentTarget.style.color = accentColor;
794
- e.currentTarget.style.paddingLeft = "10px";
795
909
  },
796
910
  onMouseLeave: (e) => {
797
- e.currentTarget.style.color = textMuted;
798
- e.currentTarget.style.paddingLeft = "0px";
911
+ e.currentTarget.style.borderColor = borderCol;
912
+ e.currentTarget.style.backgroundColor = "transparent";
913
+ e.currentTarget.style.color = textMain;
799
914
  }
800
915
  },
801
- child.label
802
- ))));
803
- })), /* @__PURE__ */ React2.createElement("div", { ref: infoContainerRef, style: styles.infoArea }, /* @__PURE__ */ React2.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ React2.createElement("span", { style: styles.infoLabel }, contact.title), /* @__PURE__ */ React2.createElement("span", { style: styles.infoText }, contact.email), /* @__PURE__ */ React2.createElement("span", { style: { ...styles.infoText, color: textMuted } }, contact.address)), /* @__PURE__ */ React2.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ React2.createElement("span", { style: styles.infoLabel }, "Socials"), /* @__PURE__ */ React2.createElement("div", { style: styles.socialGrid }, socials.map((social, idx) => /* @__PURE__ */ React2.createElement(
804
- "a",
805
- {
806
- key: idx,
807
- href: social.path,
808
- style: styles.socialLink,
809
- onMouseEnter: (e) => {
810
- e.currentTarget.style.borderColor = accentColor;
811
- e.currentTarget.style.backgroundColor = `${accentColor}11`;
812
- e.currentTarget.style.color = accentColor;
813
- },
814
- onMouseLeave: (e) => {
815
- e.currentTarget.style.borderColor = borderCol;
816
- e.currentTarget.style.backgroundColor = "transparent";
817
- e.currentTarget.style.color = textMain;
818
- }
819
- },
820
- social.icon,
821
- " ",
822
- social.label
823
- )))))));
916
+ social.icon,
917
+ " ",
918
+ social.label
919
+ )))))
920
+ ));
824
921
  };
825
922
 
826
923
  // src/components/Spotlight/Spotlight.jsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aura-ui-library",
3
- "version": "1.0.29",
3
+ "version": "1.0.30",
4
4
  "description": "A modern and customizable UI library for React applications.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",