@sudobility/building_blocks 0.0.1

package/dist/index.js

@@ -0,0 +1,769 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { TopbarProvider, Topbar, TopbarLeft, TopbarNavigation, TopbarLogo, TopbarRight, TopbarActions, BreadcrumbSection, Footer, FooterCompact, FooterCompactLeft, FooterVersion, FooterCopyright, FooterCompactRight, FooterGrid, FooterLinkSection, FooterLink, FooterBottom, FooterBrand, Logo, FooterSocialLinks, LayoutProvider } from "@sudobility/components";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ChevronDownIcon, CalendarDaysIcon } from "@heroicons/react/24/outline";
+import { GRADIENT_CLASSES } from "@sudobility/design";
+import { cva } from "class-variance-authority";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+const DEFAULT_LANGUAGES = [
+  { code: "en", name: "English", flag: "🇺🇸" },
+  { code: "ar", name: "العربية", flag: "🇸🇦" },
+  { code: "de", name: "Deutsch", flag: "🇩🇪" },
+  { code: "es", name: "Español", flag: "🇪🇸" },
+  { code: "fr", name: "Français", flag: "🇫🇷" },
+  { code: "it", name: "Italiano", flag: "🇮🇹" },
+  { code: "ja", name: "日本語", flag: "🇯🇵" },
+  { code: "ko", name: "한국어", flag: "🇰🇷" },
+  { code: "pt", name: "Português", flag: "🇵🇹" },
+  { code: "ru", name: "Русский", flag: "🇷🇺" },
+  { code: "sv", name: "Svenska", flag: "🇸🇪" },
+  { code: "th", name: "ไทย", flag: "🇹🇭" },
+  { code: "uk", name: "Українська", flag: "🇺🇦" },
+  { code: "vi", name: "Tiếng Việt", flag: "🇻🇳" },
+  { code: "zh", name: "简体中文", flag: "🇨🇳" },
+  { code: "zh-hant", name: "繁體中文", flag: "🇹🇼" }
+];
+const RTL_LANGUAGES = ["ar"];
+function isRTL(languageCode) {
+  return RTL_LANGUAGES.includes(languageCode);
+}
+const LanguageSelector = ({
+  languages = DEFAULT_LANGUAGES,
+  currentLanguage = "en",
+  onLanguageChange,
+  variant = "compact",
+  className,
+  label = "Language",
+  helperText = "Select your preferred language"
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const sortedLanguages = useMemo(
+    () => [...languages].sort((a, b) => a.name.localeCompare(b.name)),
+    [languages]
+  );
+  const currentLang = useMemo(
+    () => languages.find((lang) => lang.code === currentLanguage) || languages[0],
+    [languages, currentLanguage]
+  );
+  const handleLanguageChange = useCallback(
+    (langCode) => {
+      if (langCode !== currentLanguage) {
+        onLanguageChange == null ? void 0 : onLanguageChange(langCode);
+      }
+      setIsOpen(false);
+    },
+    [currentLanguage, onLanguageChange]
+  );
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }
+  }, [isOpen]);
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: cn("relative", className), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setIsOpen(!isOpen),
+          className: cn(
+            "flex items-center gap-2 px-3 py-2 h-10 rounded-lg",
+            "hover:bg-gray-100 dark:hover:bg-gray-700",
+            "transition-colors"
+          ),
+          "aria-label": "Select language",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-lg leading-none", children: currentLang == null ? void 0 : currentLang.flag }),
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:block text-sm font-medium text-gray-700 dark:text-gray-300", children: currentLang == null ? void 0 : currentLang.name }),
+            /* @__PURE__ */ jsx(
+              ChevronDownIcon,
+              {
+                className: cn(
+                  "h-4 w-4 text-gray-500 dark:text-gray-400 transition-transform",
+                  isOpen && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute right-0 mt-2 w-48 py-1 z-50",
+            "bg-white dark:bg-gray-800",
+            "border border-gray-200 dark:border-gray-700",
+            "rounded-lg shadow-lg",
+            "max-h-64 overflow-y-auto"
+          ),
+          role: "listbox",
+          "aria-label": "Languages",
+          children: sortedLanguages.map((lang) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleLanguageChange(lang.code),
+              className: cn(
+                "w-full flex items-center gap-3 px-3 py-2 text-left",
+                "hover:bg-gray-100 dark:hover:bg-gray-700",
+                "transition-colors",
+                lang.code === currentLanguage && "bg-gray-100 dark:bg-gray-700 font-medium"
+              ),
+              role: "option",
+              "aria-selected": lang.code === currentLanguage,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg leading-none", children: lang.flag }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: lang.name })
+              ]
+            },
+            lang.code
+          ))
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { children: label }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setIsOpen(!isOpen),
+          className: cn(
+            "flex items-center justify-between w-full px-3 py-2 text-left",
+            "bg-white dark:bg-gray-800",
+            "border border-gray-300 dark:border-gray-600",
+            "rounded-md",
+            "hover:bg-gray-50 dark:hover:bg-gray-700",
+            "transition-colors"
+          ),
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-lg leading-none", children: currentLang == null ? void 0 : currentLang.flag }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: currentLang == null ? void 0 : currentLang.name })
+            ] }),
+            /* @__PURE__ */ jsx(
+              ChevronDownIcon,
+              {
+                className: cn(
+                  "h-4 w-4 text-gray-500 dark:text-gray-400 transition-transform",
+                  isOpen && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute left-0 right-0 mt-1 py-1 z-50",
+            "bg-white dark:bg-gray-800",
+            "border border-gray-200 dark:border-gray-700",
+            "rounded-md shadow-lg",
+            "max-h-64 overflow-y-auto"
+          ),
+          role: "listbox",
+          "aria-label": "Languages",
+          children: sortedLanguages.map((lang) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleLanguageChange(lang.code),
+              className: cn(
+                "w-full flex items-center gap-3 px-3 py-2 text-left",
+                "hover:bg-gray-100 dark:hover:bg-gray-700",
+                "transition-colors",
+                lang.code === currentLanguage && "bg-gray-100 dark:bg-gray-700 font-medium"
+              ),
+              role: "option",
+              "aria-selected": lang.code === currentLanguage,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg leading-none", children: lang.flag }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: lang.name })
+              ]
+            },
+            lang.code
+          ))
+        }
+      )
+    ] }),
+    helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
+const DefaultLinkComponent$2 = ({
+  href,
+  className,
+  children,
+  onClick
+}) => /* @__PURE__ */ jsx("a", { href, className, onClick, children });
+const AppTopBar = ({
+  logo,
+  menuItems,
+  languages = DEFAULT_LANGUAGES,
+  currentLanguage = "en",
+  onLanguageChange,
+  hideLanguageSelector = false,
+  languageSelectorProps,
+  collapseBelow = "lg",
+  renderAccountSection,
+  LinkComponent = DefaultLinkComponent$2,
+  sticky = true,
+  variant = "default",
+  mobileMenuLabel = "Menu",
+  className,
+  zIndex = "highest",
+  ariaLabel = "Main navigation"
+}) => {
+  const visibleMenuItems = useMemo(
+    () => menuItems.filter((item) => item.show !== false),
+    [menuItems]
+  );
+  const navItems = useMemo(
+    () => visibleMenuItems.map((item) => ({
+      id: item.id,
+      label: item.label,
+      icon: item.icon,
+      href: item.href
+    })),
+    [visibleMenuItems]
+  );
+  const LinkWrapper = useMemo(
+    () => ({ href, className: className2, children }) => /* @__PURE__ */ jsx(LinkComponent, { href, className: className2, children }),
+    [LinkComponent]
+  );
+  const handleLogoClick = () => {
+    var _a;
+    (_a = logo.onClick) == null ? void 0 : _a.call(logo);
+  };
+  return /* @__PURE__ */ jsx(TopbarProvider, { variant, sticky, children: /* @__PURE__ */ jsxs(
+    Topbar,
+    {
+      variant,
+      sticky,
+      zIndex,
+      "aria-label": ariaLabel,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsx(TopbarLeft, { children: /* @__PURE__ */ jsx(
+          TopbarNavigation,
+          {
+            items: navItems,
+            collapseBelow,
+            LinkComponent: LinkWrapper,
+            mobileMenuLabel,
+            children: /* @__PURE__ */ jsx(TopbarLogo, { onClick: handleLogoClick, size: "md", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: logo.src,
+                  alt: logo.alt || logo.appName,
+                  className: "h-8 w-8 object-contain"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: logo.appName })
+            ] }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TopbarRight, { children: /* @__PURE__ */ jsxs(TopbarActions, { gap: "md", children: [
+          !hideLanguageSelector && /* @__PURE__ */ jsx(
+            LanguageSelector,
+            {
+              languages,
+              currentLanguage,
+              onLanguageChange,
+              variant: "compact",
+              ...languageSelectorProps
+            }
+          ),
+          renderAccountSection == null ? void 0 : renderAccountSection()
+        ] }) })
+      ]
+    }
+  ) });
+};
+const AppTopBarWithFirebaseAuth = ({
+  AuthActionComponent,
+  authenticatedMenuItems = [],
+  onLoginClick,
+  avatarSize = 32,
+  dropdownAlign = "right",
+  loginButtonText,
+  loginButtonClassName,
+  ...topBarProps
+}) => {
+  const renderAccountSection = () => /* @__PURE__ */ jsx(
+    AuthActionComponent,
+    {
+      avatarSize,
+      dropdownAlign,
+      onLoginClick,
+      menuItems: authenticatedMenuItems,
+      loginButtonText,
+      loginButtonClassName: cn(
+        "px-4 py-2 text-sm font-medium rounded-lg",
+        "bg-blue-600 text-white hover:bg-blue-700",
+        "transition-colors",
+        loginButtonClassName
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(AppTopBar, { ...topBarProps, renderAccountSection });
+};
+var AuthStatus = /* @__PURE__ */ ((AuthStatus2) => {
+  AuthStatus2["DISCONNECTED"] = "disconnected";
+  AuthStatus2["CONNECTED"] = "connected";
+  AuthStatus2["VERIFIED"] = "verified";
+  return AuthStatus2;
+})(AuthStatus || {});
+var ChainType = /* @__PURE__ */ ((ChainType2) => {
+  ChainType2["EVM"] = "evm";
+  ChainType2["SOLANA"] = "solana";
+  return ChainType2;
+})(ChainType || {});
+const DefaultConnectButton = ({ onClick, content = "Connect Wallet", className, useGradient }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    onClick,
+    className: cn(
+      useGradient ? GRADIENT_CLASSES.headerButton : "px-4 py-2 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors",
+      className
+    ),
+    children: content
+  }
+);
+const FallbackWalletDisplay = ({ walletAddress, onDisconnect }) => {
+  const truncatedAddress = `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: truncatedAddress }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onDisconnect(),
+        className: "text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+        children: "Disconnect"
+      }
+    )
+  ] });
+};
+const AppTopBarWithWallet = ({
+  WalletDropdownMenuComponent,
+  isConnected,
+  walletAddress,
+  authStatus = "disconnected",
+  chainType = "unknown",
+  onConnect,
+  onDisconnect,
+  walletMenuItems = [],
+  connectButtonContent,
+  connectButtonClassName,
+  useGradientButton = true,
+  avatar,
+  displayName,
+  statusLabels,
+  ...topBarProps
+}) => {
+  const renderAccountSection = () => {
+    if (!isConnected || !walletAddress) {
+      return /* @__PURE__ */ jsx(
+        DefaultConnectButton,
+        {
+          onClick: onConnect,
+          content: connectButtonContent,
+          className: connectButtonClassName,
+          useGradient: useGradientButton
+        }
+      );
+    }
+    if (WalletDropdownMenuComponent) {
+      return /* @__PURE__ */ jsx(
+        WalletDropdownMenuComponent,
+        {
+          walletAddress,
+          authStatus,
+          chainType,
+          menuItems: walletMenuItems,
+          avatar,
+          displayName,
+          statusLabels
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      FallbackWalletDisplay,
+      {
+        walletAddress,
+        onDisconnect
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(AppTopBar, { ...topBarProps, renderAccountSection });
+};
+const breadcrumbContainerVariants = cva("border-b", {
+  variants: {
+    variant: {
+      default: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
+      transparent: "bg-transparent border-transparent",
+      subtle: "bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+const TalkToFounderButton = ({ config }) => {
+  const IconComponent = config.icon || CalendarDaysIcon;
+  const buttonText = config.buttonText || "Talk to Founder";
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: config.meetingUrl,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn(
+        "inline-flex items-center gap-2 px-3 py-1.5",
+        "text-sm font-medium",
+        "text-blue-600 dark:text-blue-400",
+        "hover:text-blue-700 dark:hover:text-blue-300",
+        "bg-blue-50 dark:bg-blue-900/20",
+        "hover:bg-blue-100 dark:hover:bg-blue-900/30",
+        "rounded-full",
+        "border border-blue-200 dark:border-blue-800",
+        "transition-colors"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(IconComponent, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { children: buttonText })
+      ]
+    }
+  );
+};
+const AppBreadcrumbs = ({
+  items,
+  shareConfig,
+  talkToFounder,
+  variant = "default",
+  className,
+  contentClassName
+}) => {
+  if (!items || items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(breadcrumbContainerVariants({ variant }), className), children: /* @__PURE__ */ jsx("div", { className: cn("max-w-7xl mx-auto px-4 py-3", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(BreadcrumbSection, { items, shareConfig }) }),
+    talkToFounder && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: /* @__PURE__ */ jsx(TalkToFounderButton, { config: talkToFounder }) })
+  ] }) }) });
+};
+const DefaultLinkComponent$1 = ({
+  href,
+  className,
+  children,
+  onClick
+}) => /* @__PURE__ */ jsx("a", { href, className, onClick, children });
+function getCopyrightYear$1(startYear = 2025) {
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  if (currentYear === startYear) {
+    return String(startYear);
+  } else if (currentYear > startYear) {
+    return `${startYear}-${currentYear}`;
+  }
+  return String(startYear);
+}
+const AppFooter = ({
+  version,
+  copyrightYear,
+  companyName,
+  companyUrl,
+  rightsText = "All rights reserved",
+  statusIndicator,
+  StatusIndicatorComponent,
+  links = [],
+  LinkComponent = DefaultLinkComponent$1,
+  sticky = true,
+  isNetworkOnline = true,
+  className
+}) => {
+  const year = copyrightYear || getCopyrightYear$1();
+  const companyLink = companyUrl ? /* @__PURE__ */ jsx(
+    LinkComponent,
+    {
+      href: companyUrl,
+      className: "text-blue-400 hover:text-blue-300 transition-colors",
+      children: companyName
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    Footer,
+    {
+      variant: "compact",
+      sticky,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxs(FooterCompact, { children: [
+        /* @__PURE__ */ jsxs(FooterCompactLeft, { children: [
+          version && /* @__PURE__ */ jsx(FooterVersion, { version }),
+          /* @__PURE__ */ jsx(
+            FooterCopyright,
+            {
+              year,
+              companyName,
+              rightsText,
+              companyLink
+            }
+          ),
+          statusIndicator && StatusIndicatorComponent && /* @__PURE__ */ jsx(
+            StatusIndicatorComponent,
+            {
+              statusPageUrl: statusIndicator.statusPageUrl,
+              apiEndpoint: statusIndicator.apiEndpoint,
+              refreshInterval: statusIndicator.refreshInterval || 6e4,
+              size: "sm",
+              version,
+              isNetworkOnline
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FooterCompactRight, { children: links.map((link, index) => /* @__PURE__ */ jsx(React.Fragment, { children: link.onClick ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: link.onClick,
+            className: "text-gray-400 hover:text-white transition-colors",
+            children: link.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href: link.href,
+            className: "text-gray-400 hover:text-white transition-colors",
+            children: link.label
+          }
+        ) }, link.href || index)) })
+      ] })
+    }
+  );
+};
+const DefaultLinkComponent = ({
+  href,
+  className,
+  children,
+  onClick
+}) => /* @__PURE__ */ jsx("a", { href, className, onClick, children });
+function getCopyrightYear(startYear = 2025) {
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  if (currentYear === startYear) {
+    return String(startYear);
+  } else if (currentYear > startYear) {
+    return `${startYear}-${currentYear}`;
+  }
+  return String(startYear);
+}
+function getGridColumnsClass(sectionCount, explicit) {
+  const cols = explicit || Math.min(sectionCount, 4);
+  switch (cols) {
+    case 2:
+      return "md:grid-cols-2";
+    case 3:
+      return "md:grid-cols-3";
+    case 4:
+      return "md:grid-cols-4";
+    case 5:
+      return "md:grid-cols-5";
+    default:
+      return "md:grid-cols-4";
+  }
+}
+const AppFooterForHomePage = ({
+  logo,
+  linkSections,
+  socialLinks,
+  statusIndicator,
+  StatusIndicatorComponent,
+  version,
+  copyrightYear,
+  companyName,
+  companyUrl,
+  description,
+  rightsText = "All rights reserved",
+  LinkComponent = DefaultLinkComponent,
+  isNetworkOnline = true,
+  className,
+  gridColumns
+}) => {
+  const year = copyrightYear || getCopyrightYear();
+  const gridClass = getGridColumnsClass(linkSections.length, gridColumns);
+  const companyLink = companyUrl ? /* @__PURE__ */ jsx(
+    LinkComponent,
+    {
+      href: companyUrl,
+      className: "text-blue-400 hover:text-blue-300 transition-colors",
+      children: companyName
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsxs(Footer, { variant: "full", className: cn(className), children: [
+    /* @__PURE__ */ jsx(FooterGrid, { className: gridClass, children: linkSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
+      FooterLinkSection,
+      {
+        title: section.title,
+        children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsx(FooterLink, { children: link.onClick ? /* @__PURE__ */ jsx("button", { onClick: link.onClick, className: "text-left", children: link.label }) : /* @__PURE__ */ jsx(LinkComponent, { href: link.href, children: link.label }) }, link.href || linkIndex))
+      },
+      section.title || sectionIndex
+    )) }),
+    /* @__PURE__ */ jsxs(FooterBottom, { children: [
+      /* @__PURE__ */ jsx(
+        FooterBrand,
+        {
+          description,
+          className: "flex flex-col items-center",
+          children: /* @__PURE__ */ jsx(
+            LinkComponent,
+            {
+              href: "/",
+              className: "text-white hover:opacity-80 transition-opacity",
+              children: logo.src ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: logo.src,
+                  alt: logo.appName,
+                  className: "h-8 object-contain"
+                }
+              ) : /* @__PURE__ */ jsx(Logo, { size: "md", showText: true, logoText: logo.appName })
+            }
+          )
+        }
+      ),
+      version && /* @__PURE__ */ jsx(FooterVersion, { version }),
+      /* @__PURE__ */ jsx(
+        FooterCopyright,
+        {
+          year,
+          companyName,
+          rightsText,
+          companyLink
+        }
+      ),
+      statusIndicator && StatusIndicatorComponent && /* @__PURE__ */ jsx(
+        StatusIndicatorComponent,
+        {
+          statusPageUrl: statusIndicator.statusPageUrl,
+          apiEndpoint: statusIndicator.apiEndpoint,
+          refreshInterval: statusIndicator.refreshInterval || 6e4,
+          size: "sm",
+          version,
+          isNetworkOnline
+        }
+      )
+    ] }),
+    socialLinks && /* @__PURE__ */ jsx("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ jsx(
+      FooterSocialLinks,
+      {
+        twitterUrl: socialLinks.twitterUrl,
+        discordUrl: socialLinks.discordUrl,
+        linkedinUrl: socialLinks.linkedinUrl,
+        githubUrl: socialLinks.githubUrl,
+        redditUrl: socialLinks.redditUrl,
+        farcasterUrl: socialLinks.farcasterUrl,
+        telegramUrl: socialLinks.telegramUrl
+      }
+    ) })
+  ] });
+};
+const layoutVariants = cva("min-h-screen flex flex-col", {
+  variants: {
+    background: {
+      default: "bg-gray-50 dark:bg-gray-900",
+      white: "bg-white dark:bg-gray-900",
+      gradient: "bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-900 dark:to-gray-800"
+    }
+  },
+  defaultVariants: {
+    background: "default"
+  }
+});
+const maxWidthClasses = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "4xl": "max-w-4xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-full"
+};
+const paddingClasses = {
+  none: "",
+  sm: "px-4 sm:px-6 py-6",
+  md: "px-4 py-8",
+  lg: "px-4 py-12"
+};
+const AppPageLayout = ({
+  children,
+  topBar,
+  breadcrumbs,
+  footer,
+  maxWidth = "7xl",
+  contentPadding = "md",
+  background = "default",
+  layoutMode = "standard",
+  className,
+  contentClassName,
+  mainClassName
+}) => {
+  return /* @__PURE__ */ jsx(LayoutProvider, { mode: layoutMode, children: /* @__PURE__ */ jsxs("div", { className: cn(layoutVariants({ background }), className), children: [
+    /* @__PURE__ */ jsx("header", { children: topBar }),
+    breadcrumbs && breadcrumbs.items && breadcrumbs.items.length > 0 && /* @__PURE__ */ jsx(AppBreadcrumbs, { ...breadcrumbs }),
+    /* @__PURE__ */ jsx("main", { className: cn("flex-1 overflow-auto", mainClassName), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mx-auto",
+          maxWidthClasses[maxWidth],
+          paddingClasses[contentPadding],
+          contentClassName
+        ),
+        children
+      }
+    ) }),
+    footer && /* @__PURE__ */ jsx("footer", { children: footer })
+  ] }) });
+};
+export {
+  AppBreadcrumbs,
+  AppFooter,
+  AppFooterForHomePage,
+  AppPageLayout,
+  AppTopBar,
+  AppTopBarWithFirebaseAuth,
+  AppTopBarWithWallet,
+  AuthStatus,
+  ChainType,
+  DEFAULT_LANGUAGES,
+  LanguageSelector,
+  RTL_LANGUAGES,
+  cn,
+  isRTL
+};
+//# sourceMappingURL=index.js.map