@syscore/ui-library 1.3.5 → 1.3.7

package/dist/index.d.ts

@@ -236,6 +236,7 @@ import { Skeleton } from '../client/components/ui/skeleton';
 import { Slider } from '../client/components/ui/slider';
 import { Toaster as Sonner } from '../client/components/ui/sonner';
 import { StandardLogo } from '../client/components/icons/StandardLogo';
+import { StandardNavigation } from '../client/components/ui/standard-navigation';
 import { Switch } from '../client/components/ui/switch';
 import { Tab } from '../client/hooks/use-tabs';
 import { Table } from '../client/components/ui/table';
@@ -778,6 +779,8 @@ export { Sonner }
 
 export { StandardLogo }
 
+export { StandardNavigation }
+
 export { Switch }
 
 export { Tab }

package/dist/index.es.js

@@ -219,11 +219,12 @@ const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardFooter.displayName = "CardFooter";
-const CardWithIcon = React.forwardRef(({ icon: Icon, title, description }, ref) => /* @__PURE__ */ jsxs(
+const CardWithIcon = React.forwardRef(({ icon: Icon, title, description, onClick }, ref) => /* @__PURE__ */ jsxs(
   Card,
   {
     ref,
     className: "card-with-icon",
+    onClick,
     children: [
       /* @__PURE__ */ jsxs("div", { className: "card-with-icon__header", children: [
         Icon && /* @__PURE__ */ jsx(Icon, { className: "card-with-icon__icon" }),
@@ -8858,6 +8859,427 @@ const StandardLogo = ({ className = "" }) => {
     }
   );
 };
+const ALPHA_PATH = "M5.3387 0.0229882C5.37971 0.0229882 5.45295 0.0199228 5.5584 0.0137925C5.66386 0.00459714 5.74442 0 5.80007 0C6.72867 0 7.49908 0.269732 8.11131 0.809196C8.72354 1.34559 9.14097 2.09195 9.3636 3.04828C9.44855 3.47433 9.49835 3.96628 9.513 4.52414V5.16782C10.2014 4.07663 10.7287 2.85517 11.0948 1.50345C11.1505 1.29808 11.1959 1.17701 11.2311 1.14023C11.2662 1.10345 11.3761 1.08506 11.5606 1.08506C11.8535 1.08506 12 1.13563 12 1.23678C12 1.25211 11.9722 1.37778 11.9165 1.61379C11.5093 3.24751 10.7931 4.77701 9.76785 6.2023L9.53497 6.51034L9.55694 7.04368C9.59795 8.23295 9.72391 8.9318 9.93482 9.14023C9.97583 9.16782 10.0388 9.18161 10.1238 9.18161C10.32 9.15402 10.5031 9.06973 10.673 8.92874C10.8429 8.78774 10.963 8.62222 11.0333 8.43218C11.0597 8.32797 11.0948 8.26513 11.1388 8.24368C11.1798 8.22222 11.2852 8.21149 11.4551 8.21149C11.7364 8.21149 11.877 8.27739 11.877 8.40919C11.877 8.49808 11.8345 8.63142 11.7495 8.8092C11.5943 9.13103 11.3687 9.4069 11.0729 9.63678C10.777 9.8636 10.4475 9.97701 10.0842 9.97701H9.93482C8.97986 9.97701 8.3398 9.44674 8.01465 8.38621L7.95313 8.23448C7.20615 8.74942 6.79165 9.02835 6.70963 9.07126C5.66679 9.69042 4.61809 10 3.56353 10C2.56756 10 1.76346 9.70575 1.15123 9.11724C0.538997 8.52874 0.162578 7.75632 0.02197 6.8C0.0073233 6.71111 0 6.54866 0 6.31264C0 5.9295 0.02197 5.62146 0.0659099 5.38851C0.276822 4.06437 0.887587 2.8751 1.89821 1.82069C2.91175 0.769348 4.05859 0.170115 5.3387 0.0229882ZM1.83669 7.10805C1.83669 7.73946 1.9978 8.24368 2.32003 8.62069C2.64518 8.99464 3.09484 9.18161 3.66899 9.18161C4.03515 9.18161 4.44379 9.12337 4.89491 9.0069C5.6829 8.80153 6.44892 8.4046 7.19297 7.81609C7.29257 7.74253 7.38777 7.66437 7.47858 7.58161C7.56939 7.50192 7.64262 7.43295 7.69828 7.37471L7.78176 7.28276L7.76419 7.08506C7.76419 6.95326 7.75979 6.75862 7.75101 6.50115C7.74515 6.24368 7.74222 5.98927 7.74222 5.73793C7.72757 5.18008 7.71732 4.74636 7.71146 4.43678C7.70267 4.1272 7.67338 3.74866 7.62358 3.30115C7.57671 2.85364 7.5108 2.50728 7.42585 2.26207C7.3409 2.01992 7.22519 1.77471 7.07873 1.52644C6.92933 1.2751 6.73892 1.09425 6.50751 0.983908C6.27609 0.873563 6.00513 0.81839 5.69462 0.81839C4.72501 0.81839 3.87404 1.35479 3.14171 2.42759C2.79019 2.97318 2.49579 3.71647 2.25851 4.65747C1.9773 5.73333 1.83669 6.55019 1.83669 7.10805Z";
+const PATH_LENGTH = 60;
+const AlphaIcon = ({ dark }) => {
+  if (dark) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "12",
+        height: "10",
+        viewBox: "0 0 12 10",
+        fill: "none",
+        className: "mt-1.5",
+        style: { overflow: "visible" },
+        children: /* @__PURE__ */ jsx("path", { d: ALPHA_PATH, fill: "currentColor" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "10",
+      viewBox: "0 0 12 10",
+      fill: "none",
+      className: "mt-1.5",
+      style: { overflow: "visible" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: ALPHA_PATH,
+            fill: "url(#paint0_linear_10081_30848)",
+            opacity: "0.4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.path,
+          {
+            d: ALPHA_PATH,
+            fill: "none",
+            stroke: "url(#stroke_gradient)",
+            strokeWidth: "0.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            initial: { strokeDashoffset: PATH_LENGTH },
+            animate: { strokeDashoffset: -PATH_LENGTH },
+            style: { strokeDasharray: `8 ${PATH_LENGTH - 8}` },
+            transition: {
+              duration: 2,
+              repeat: Infinity,
+              repeatDelay: 8,
+              ease: "linear"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: "paint0_linear_10081_30848",
+              x1: "-3.27254",
+              y1: "4.99923",
+              x2: "6.36738",
+              y2: "-2.36962",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx("stop", { stopColor: "#8AEFDB" }),
+                /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#D4BACE" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#CBE0F1" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: "stroke_gradient",
+              x1: "0",
+              y1: "0",
+              x2: "12",
+              y2: "10",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx("stop", { stopColor: "#8AEFDB" }),
+                /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#D4BACE" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#CBE0F1" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const StandardNavigation = ({
+  navLinks = [],
+  logo: Logo,
+  userIcon: UserIcon,
+  beforeActions,
+  userDropdown,
+  isStrategy = false,
+  Link: LinkComponent,
+  onLinkClick,
+  onClose
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(null);
+  const [isUserDropdownOpen, setIsUserDropdownOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const menuItemsRef = React.useRef(null);
+  const overlayRef = React.useRef(null);
+  const userDropdownRef = React.useRef(null);
+  const handleMouseLeave = () => {
+    setIsOpen(false);
+    setActiveItem(null);
+  };
+  const handleNavItemMouseEnter = (index) => {
+    const item = navLinks[index];
+    if (item == null ? void 0 : item.section) {
+      setIsOpen(true);
+      setActiveItem(index + 1);
+    }
+  };
+  const handleUserIconClick = (e) => {
+    e.preventDefault();
+    if (userDropdown) {
+      setIsUserDropdownOpen(!isUserDropdownOpen);
+    }
+  };
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (userDropdownRef.current && !userDropdownRef.current.contains(target)) {
+        setIsUserDropdownOpen(false);
+      }
+    };
+    if (isUserDropdownOpen) {
+      setTimeout(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+      }, 0);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isUserDropdownOpen]);
+  const NavLink = ({ href, className, "aria-label": ariaLabel, children }) => {
+    if (LinkComponent) {
+      return /* @__PURE__ */ jsx(LinkComponent, { href, className, "aria-label": ariaLabel, children });
+    }
+    if (onLinkClick) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className,
+          "aria-label": ariaLabel,
+          onClick: (e) => {
+            e.preventDefault();
+            onLinkClick(href);
+          },
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("a", { href, className, "aria-label": ariaLabel, children });
+  };
+  const renderNavLinkItem = (link) => {
+    const href = link.href || "#";
+    const hasBullet = link.bulletColor !== void 0;
+    const hasBadge = !!link.badge;
+    const isSmall = hasBullet || link.children;
+    if (hasBullet) {
+      return /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+        link.bulletColor && link.bulletColor !== "" ? /* @__PURE__ */ jsx(NavBullet, { color: link.bulletColor }) : /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+        /* @__PURE__ */ jsx(
+          NavLink,
+          {
+            href,
+            className: "navigation-tray-link-small",
+            children: link.label
+          }
+        )
+      ] });
+    }
+    if (hasBadge) {
+      return /* @__PURE__ */ jsxs(
+        NavLink,
+        {
+          href,
+          className: "navigation-tray-link navigation-tray-link--with-badge",
+          children: [
+            link.label,
+            /* @__PURE__ */ jsx("span", { className: "navigation-tray-badge", children: link.badge })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      NavLink,
+      {
+        href,
+        className: isSmall ? "navigation-tray-link-small" : "navigation-tray-link",
+        children: link.label
+      }
+    );
+  };
+  const renderNavColumn = (column) => {
+    if (!column.links || column.links.length === 0) return null;
+    const hasSpacing = column.links.some(
+      (link) => !link.bulletColor && !link.children
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+      column.title && /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: column.title }),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: cn(
+            "navigation-tray-column-list",
+            hasSpacing && "navigation-tray-column-list--spacing-5"
+          ),
+          children: column.links.map((link, idx) => /* @__PURE__ */ jsx("li", { children: renderNavLinkItem(link) }, idx))
+        }
+      )
+    ] }, column.title || "column");
+  };
+  const renderTraySection = () => {
+    if (!activeItem) return null;
+    const activeNavItem = navLinks[activeItem - 1];
+    if (!(activeNavItem == null ? void 0 : activeNavItem.section)) return null;
+    const section = activeNavItem.section;
+    return /* @__PURE__ */ jsxs("div", { className: "navigation-tray-section", children: [
+      section.heading && /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: "navigation-tray-heading",
+          style: section.headingGradient ? {
+            background: section.headingGradient,
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            backgroundClip: "text"
+          } : void 0,
+          children: section.heading
+        }
+      ),
+      section.columns && section.columns.length > 0 && /* @__PURE__ */ jsx("div", { className: "navigation-tray-columns", children: section.columns.map((column, idx) => renderNavColumn(column)) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: containerRef,
+      className: cn("navigation", isStrategy && "navigation--strategy"),
+      "data-strategy": isStrategy,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        !isStrategy && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: overlayRef,
+            className: "navigation-overlay",
+            "data-open": isOpen
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "navigation-container", children: [
+          /* @__PURE__ */ jsxs("div", { className: "navigation-logo-container", children: [
+            isStrategy ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "navigation-close-button",
+                size: "icon",
+                onClick: (e) => {
+                  e.preventDefault();
+                  if (onClose) {
+                    onClose();
+                  } else if (onLinkClick) {
+                    onLinkClick("/");
+                  }
+                },
+                children: /* @__PURE__ */ jsx(UtilityClose, { className: "navigation-close-icon" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              NavLink,
+              {
+                href: "/",
+                className: cn(
+                  "navigation-logo-link",
+                  isStrategy && "navigation-logo-link--strategy"
+                ),
+                "data-strategy": isStrategy,
+                "aria-label": "Home",
+                children: Logo ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(NavLogo, { dark: isStrategy }),
+                  /* @__PURE__ */ jsx(StandardLogo, { className: cn(!isStrategy ? "text-white" : "text-black") }),
+                  /* @__PURE__ */ jsx(AlphaIcon, { dark: isStrategy })
+                ] }) : null
+              }
+            )
+          ] }),
+          !isStrategy ? /* @__PURE__ */ jsx("div", { className: "navigation-nav-container", children: /* @__PURE__ */ jsx("ul", { className: "navigation-nav-list", children: navLinks.map((item, index) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "navigation-nav-item",
+              onMouseEnter: () => handleNavItemMouseEnter(index),
+              children: [
+                item.href ? /* @__PURE__ */ jsx(NavLink, { href: item.href, className: "navigation-nav-link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "navigation-nav-link", children: item.label }),
+                activeItem === index + 1 && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    id: "underline",
+                    className: "navigation-underline",
+                    layoutId: "underline",
+                    transition: { duration: 0.2, ease: "easeOut" },
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "navigation-underline-circle navigation-underline-circle--gradient",
+                        style: {
+                          width: "10px",
+                          height: "5px",
+                          borderBottomLeftRadius: "100px",
+                          borderBottomRightRadius: "100px",
+                          borderBottom: "0",
+                          boxSizing: "border-box"
+                        }
+                      }
+                    )
+                  }
+                ),
+                index === 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "navigation-underline navigation-underline--static",
+                    style: { transition: "all 0.2s ease-out" },
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "navigation-underline-circle navigation-underline-circle--white",
+                        style: {
+                          width: "10px",
+                          height: "5px",
+                          borderTopLeftRadius: "100px",
+                          borderTopRightRadius: "100px",
+                          borderBottom: "0",
+                          boxSizing: "border-box"
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            index
+          )) }) }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "navigation-actions", children: [
+            beforeActions && /* @__PURE__ */ jsx("div", { className: "navigation-actions-before", children: beforeActions }),
+            /* @__PURE__ */ jsxs("div", { className: "navigation-account-wrapper", ref: userDropdownRef, children: [
+              userDropdown ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Account menu",
+                  "aria-expanded": isUserDropdownOpen,
+                  className: cn(
+                    "navigation-account-link",
+                    isUserDropdownOpen && "navigation-account-link--open"
+                  ),
+                  "data-open": isOpen,
+                  "data-strategy": isStrategy,
+                  onClick: handleUserIconClick,
+                  children: UserIcon ? /* @__PURE__ */ jsx(
+                    UserIcon,
+                    {
+                      className: cn(
+                        "navigation-account-icon",
+                        isStrategy ? "navigation-account-icon--strategy" : "navigation-account-icon--default"
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: "navigation-account-icon-placeholder", children: "User" })
+                }
+              ) : /* @__PURE__ */ jsx(
+                NavLink,
+                {
+                  href: "/",
+                  "aria-label": "Account link",
+                  className: "navigation-account-link",
+                  "data-open": isOpen,
+                  "data-strategy": isStrategy,
+                  children: UserIcon ? /* @__PURE__ */ jsx(
+                    UserIcon,
+                    {
+                      className: cn(
+                        "navigation-account-icon",
+                        isStrategy ? "navigation-account-icon--strategy" : "navigation-account-icon--default"
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: "navigation-account-icon-placeholder", children: "User" })
+                }
+              ),
+              isUserDropdownOpen && userDropdown && /* @__PURE__ */ jsx("div", { className: "navigation-user-dropdown", children: userDropdown })
+            ] })
+          ] })
+        ] }),
+        isOpen && /* @__PURE__ */ jsx("div", { className: "navigation-divider" }),
+        /* @__PURE__ */ jsx("div", { ref: menuRef, className: "navigation-tray", "data-open": isOpen, children: /* @__PURE__ */ jsx("div", { className: "navigation-tray-content", children: /* @__PURE__ */ jsx("div", { ref: menuItemsRef, className: "navigation-tray-grid", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { y: 10, opacity: 0 },
+            animate: { y: 0, opacity: 1 },
+            exit: { y: -10, opacity: 0 },
+            transition: { duration: 0.2 },
+            children: renderTraySection()
+          },
+          activeItem ? activeItem : "empty"
+        ) }) }) }) })
+      ]
+    }
+  );
+};
 export {
   Accordion,
   AccordionContent,
@@ -9089,6 +9511,7 @@ export {
   Slider,
   Toaster as Sonner,
   StandardLogo,
+  StandardNavigation,
   Switch,
   Table,
   TableBody,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syscore/ui-library",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "description": "A comprehensive React component library built with Radix UI, Tailwind CSS, and TypeScript",
   "private": false,
   "type": "module",