pelatform-ui 1.3.0 → 1.4.0

package/dist/components.js

@@ -1,4 +1,45 @@
 "use client";
+import {
+  HoverBackground
+} from "./chunk-4Z3DBWB6.js";
+import {
+  useMetaColor
+} from "./chunk-V3ET2B55.js";
+import {
+  Alert,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertTitle,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  TooltipProvider
+} from "./chunk-Z4CHIWTI.js";
 
 // src/components/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -641,7 +682,895 @@ function Logo({ className }) {
     }
   );
 }
+
+// src/components/layout/main-nav.tsx
+import { ArrowUpRightIcon, ChevronDownIcon } from "lucide-react";
+import { cn as cn2 } from "@pelatform/utils";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function MainNav({ pathname, items, className }) {
+  return /* @__PURE__ */ jsx3("div", { className: cn2("me-4 hidden items-center justify-center md:flex", className), children: /* @__PURE__ */ jsx3("nav", { className: "flex items-center gap-4 font-medium text-sm xl:gap-6", children: items.map((item) => /* @__PURE__ */ jsx3(NavItemRenderer, { item, pathname, level: 1 }, item.title)) }) });
+}
+function NavItemRenderer({ item, pathname, level }) {
+  const hasChildren = item.children && item.children.length > 0;
+  const isActive = hasChildren ? item.children?.some(
+    (child) => child.href === pathname || child.href !== "/" && child.href && pathname?.startsWith(child.href) || (child.children?.some(
+      (grandchild) => grandchild.href === pathname || grandchild.href !== "/" && grandchild.href && pathname?.startsWith(grandchild.href)
+    ) ?? false)
+  ) ?? false : item.href === pathname || item.href !== "/" && item.href && pathname?.startsWith(item.href);
+  if (hasChildren && level <= 3) {
+    return /* @__PURE__ */ jsxs2(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          className: cn2(
+            "inline-flex cursor-pointer items-center gap-1 transition-colors hover:text-foreground/80 focus-visible:outline-0",
+            isActive ? "text-foreground" : "text-foreground/60"
+          ),
+          children: [
+            item.icon && /* @__PURE__ */ jsx3(item.icon, {}),
+            item.title,
+            /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "size-3.5" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx3(
+        DropdownMenuContent,
+        {
+          className: "min-w-[150px] overflow-visible",
+          side: "bottom",
+          align: "start",
+          sideOffset: 15,
+          alignOffset: -10,
+          children: item.children?.map((child) => /* @__PURE__ */ jsx3(
+            ChildNavItemRenderer,
+            {
+              item: child,
+              pathname,
+              level: level + 1
+            },
+            child.title
+          ))
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(
+    "a",
+    {
+      href: item.href ?? "#",
+      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      className: cn2(
+        "relative inline-flex items-center gap-1 transition-colors hover:text-foreground/80",
+        isActive ? "text-foreground" : "text-foreground/60"
+      ),
+      children: [
+        item.icon && /* @__PURE__ */ jsx3(item.icon, {}),
+        item.title,
+        item.external && /* @__PURE__ */ jsx3(ArrowUpRightIcon, { className: "size-3.5 opacity-60" })
+      ]
+    }
+  );
+}
+function ChildNavItemRenderer({ item, pathname, level }) {
+  const hasChildren = item.children && item.children.length > 0;
+  const isChildActive = item.href === pathname || item.href !== "/" && item.href && pathname?.startsWith(item.href) || hasChildren && (item.children?.some(
+    (grandchild) => grandchild.href === pathname || grandchild.href !== "/" && grandchild.href && pathname?.startsWith(grandchild.href)
+  ) ?? false);
+  if (hasChildren && level <= 3) {
+    return /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsxs2(
+        DropdownMenuSubTrigger,
+        {
+          className: cn2(
+            "flex w-full items-center justify-between text-muted-foreground hover:text-foreground",
+            isChildActive && "font-medium text-foreground"
+          ),
+          children: [
+            item.icon && /* @__PURE__ */ jsx3(item.icon, {}),
+            item.title
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3(DropdownMenuSubContent, { className: "min-w-[150px]", children: item.children?.map((child) => /* @__PURE__ */ jsx3(
+        ChildNavItemRenderer,
+        {
+          item: child,
+          pathname,
+          level: level + 1
+        },
+        child.title
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx3(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs2(
+    "a",
+    {
+      href: item.href || "",
+      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      className: cn2(
+        "block w-full cursor-pointer transition-colors",
+        isChildActive ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
+      ),
+      children: [
+        item.icon && /* @__PURE__ */ jsx3(item.icon, {}),
+        item.title,
+        item.external && /* @__PURE__ */ jsx3(ArrowUpRightIcon, { className: "size-3.5 opacity-60" })
+      ]
+    }
+  ) });
+}
+
+// src/components/layout/mobile-nav.tsx
+import { useCallback, useState } from "react";
+import { ArrowUpRightIcon as ArrowUpRightIcon2, ChevronDownIcon as ChevronDownIcon2, MenuIcon } from "lucide-react";
+import { cn as cn3 } from "@pelatform/utils";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function MobileNav({ children, className }) {
+  const { setMetaColor, metaColor } = useMetaColor();
+  const [open, setOpen] = useState(false);
+  const onOpenChange = useCallback(
+    (open2) => {
+      setOpen(open2);
+      setMetaColor(open2 ? "#09090b" : metaColor);
+    },
+    [setMetaColor, metaColor]
+  );
+  return /* @__PURE__ */ jsx4("div", { className: cn3("flex items-center gap-2.5 md:hidden", className), children: /* @__PURE__ */ jsxs3(Drawer, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx4(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button, { variant: "ghost", className: "group/toggle size-8 px-0 text-foreground", children: [
+      /* @__PURE__ */ jsx4(MenuIcon, {}),
+      /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Toggle Menu" })
+    ] }) }),
+    /* @__PURE__ */ jsxs3(DrawerContent, { className: "max-h-[60svh] p-0", children: [
+      /* @__PURE__ */ jsx4(DrawerTitle, { className: "sr-only", children: "Mobile menu" }),
+      /* @__PURE__ */ jsx4("div", { className: "overflow-auto p-6", children }),
+      /* @__PURE__ */ jsx4(DrawerDescription, { className: "sr-only", children: "Mobile menu" })
+    ] })
+  ] }) });
+}
+function MobileNavItemRenderer({
+  item,
+  pathname,
+  level,
+  onOpenChange
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const hasChildren = item.children && item.children.length > 0;
+  const isActive = hasChildren ? item.children?.some(
+    (child) => child.href === pathname || child.href !== "/" && child.href && pathname?.startsWith(child.href) || (child.children?.some(
+      (grandchild) => grandchild.href === pathname || grandchild.href !== "/" && grandchild.href && pathname?.startsWith(grandchild.href)
+    ) ?? false)
+  ) ?? false : item.href === pathname || item.href !== "/" && item.href && pathname?.startsWith(item.href);
+  if (hasChildren && level <= 3) {
+    console.log(item);
+    return /* @__PURE__ */ jsxs3(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsxs3(
+        CollapsibleTrigger,
+        {
+          className: cn3(
+            "flex w-full cursor-pointer items-center gap-1 text-sm transition-colors",
+            isOpen ? "text-foreground" : "text-foreground/60"
+          ),
+          children: [
+            item.icon && /* @__PURE__ */ jsx4(item.icon, {}),
+            item.title,
+            /* @__PURE__ */ jsx4(
+              ChevronDownIcon2,
+              {
+                className: cn3(
+                  "ms-auto size-3.5 opacity-60 transition-transform",
+                  isOpen && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx4(CollapsibleContent, { children: /* @__PURE__ */ jsx4("div", { className: cn3("flex flex-col space-y-2.5 pt-3", `ps-5`), children: item.children.map((child) => /* @__PURE__ */ jsx4(
+        MobileNavItemRenderer,
+        {
+          item: child,
+          pathname,
+          level: level + 1,
+          onOpenChange
+        },
+        child.title
+      )) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(
+    "a",
+    {
+      href: item.href || "#",
+      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      onClick: () => {
+        if (!item.external && item.href) {
+          window.location.href = item.href.toString();
+        }
+        onOpenChange?.(false);
+      },
+      className: cn3(
+        "inline-flex items-center gap-1 text-sm transition-colors",
+        isActive ? "text-foreground" : "text-foreground/60"
+      ),
+      children: [
+        item.icon && /* @__PURE__ */ jsx4(item.icon, {}),
+        item.title,
+        item.external && /* @__PURE__ */ jsx4(ArrowUpRightIcon2, { className: "ms-1 size-3.5 opacity-60" })
+      ]
+    }
+  );
+}
+
+// src/components/layout/site-footer.tsx
+import { cn as cn4 } from "@pelatform/utils";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SiteFooter({ children, className }) {
+  return /* @__PURE__ */ jsx5("footer", { className: cn4("border-border border-t py-5 md:py-0", className), children: /* @__PURE__ */ jsx5("div", { className: "container flex flex-col items-center justify-between gap-4 py-4 md:h-16 md:flex-row", children }) });
+}
+
+// src/components/layout/site-header.tsx
+import { cn as cn5 } from "@pelatform/utils";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SiteHeader({ children, className }) {
+  return /* @__PURE__ */ jsx6(
+    "header",
+    {
+      className: cn5(
+        "sticky top-0 z-50 w-full border-border border-b bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/60",
+        className
+      ),
+      children: /* @__PURE__ */ jsx6("div", { className: "container flex h-16 items-center justify-between gap-4", children })
+    }
+  );
+}
+
+// src/components/providers/query-provider.tsx
+import { useState as useState2 } from "react";
+import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { CircleAlertIcon } from "lucide-react";
+import { toast } from "sonner";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var QueryProvider = ({
+  client: clientProps,
+  children
+}) => {
+  const [queryClient] = useState2(
+    () => new QueryClient({
+      /** Global query defaults for all queries */
+      defaultOptions: {
+        queries: {
+          /** Time before data is considered stale (5 minutes) */
+          staleTime: 5 * 60 * 1e3,
+          /** Time before inactive queries are garbage collected (10 minutes) */
+          gcTime: 10 * 60 * 1e3,
+          /** Number of retry attempts on failure */
+          retry: (failureCount, error) => {
+            if (error?.status && error.status >= 400 && error.status < 500) {
+              return false;
+            }
+            return failureCount < 3;
+          },
+          /** Delay between retries (exponential backoff) */
+          retryDelay: (attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4),
+          /** Refetch on window focus for fresh data */
+          refetchOnWindowFocus: true,
+          /** Refetch when network reconnects */
+          refetchOnReconnect: true
+        },
+        mutations: {
+          /** Number of retry attempts for mutations */
+          retry: 1,
+          /** Delay between mutation retries */
+          retryDelay: 1e3
+        }
+      },
+      /** Global query cache with error handling */
+      queryCache: new QueryCache({
+        onError: (error, query) => {
+          const message = error?.response?.data?.message || error?.message || "Something went wrong. Please try again.";
+          if (process.env.NODE_ENV === "development") {
+            console.error("Query Error:", {
+              error,
+              queryKey: query.queryKey,
+              message,
+              timestamp: (/* @__PURE__ */ new Date()).toISOString()
+            });
+          }
+          toast.custom(
+            () => /* @__PURE__ */ jsxs4(Alert, { variant: "default", children: [
+              /* @__PURE__ */ jsx7(CircleAlertIcon, {}),
+              /* @__PURE__ */ jsx7(AlertTitle, { children: message })
+            ] }),
+            {
+              position: "top-center",
+              duration: 5e3,
+              // Show for 5 seconds
+              id: `query-error-${query.queryHash}`
+              // Prevent duplicate toasts
+            }
+          );
+        }
+      })
+    })
+  );
+  return /* @__PURE__ */ jsx7(QueryClientProvider, { client: clientProps ?? queryClient, children });
+};
+
+// src/components/providers/theme-provider.tsx
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { DEFAULT_THEME_MODE, THEME_MODES } from "@pelatform/utils";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function ThemeProvider({ children, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    NextThemesProvider,
+    {
+      attribute: "class",
+      defaultTheme: DEFAULT_THEME_MODE,
+      enableSystem: true,
+      disableTransitionOnChange: true,
+      enableColorScheme: true,
+      storageKey: "theme",
+      themes: [THEME_MODES.LIGHT, THEME_MODES.DARK, THEME_MODES.SYSTEM],
+      ...props,
+      children: /* @__PURE__ */ jsx8(TooltipProvider, { delayDuration: 0, children })
+    }
+  );
+}
+
+// src/components/ui/alert.tsx
+import {
+  CheckIcon,
+  CircleAlertIcon as CircleAlertIcon2,
+  CircleCheckIcon,
+  CircleXIcon,
+  InfoIcon,
+  TriangleAlertIcon
+} from "lucide-react";
+import { toast as toast2 } from "sonner";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var iconMap = {
+  primary: /* @__PURE__ */ jsx9(CircleAlertIcon2, { className: "text-primary" }),
+  success: /* @__PURE__ */ jsx9(CircleCheckIcon, { className: "text-success" }),
+  info: /* @__PURE__ */ jsx9(InfoIcon, { className: "text-info" }),
+  warning: /* @__PURE__ */ jsx9(TriangleAlertIcon, { className: "text-warning" }),
+  destructive: /* @__PURE__ */ jsx9(CircleXIcon, { className: "text-destructive" })
+};
+function AlertToast({
+  message = "This is a toast",
+  icon = "success",
+  variant = "default"
+}) {
+  toast2.custom(
+    () => /* @__PURE__ */ jsxs5(Alert, { variant, children: [
+      iconMap[icon ?? "success"],
+      /* @__PURE__ */ jsx9(AlertTitle, { children: message })
+    ] }),
+    {
+      // Auto-dismiss after 4 seconds
+      duration: 4e3,
+      // Generate unique ID to prevent duplicate toasts
+      id: `alert-toast-${Date.now()}`
+    }
+  );
+}
+function AlertNotification({ message, variant = "info" }) {
+  if (!message) return null;
+  const getIcon = () => {
+    switch (variant) {
+      case "destructive":
+        return /* @__PURE__ */ jsx9(CircleAlertIcon2, {});
+      case "success":
+        return /* @__PURE__ */ jsx9(CheckIcon, {});
+      case "info":
+        return /* @__PURE__ */ jsx9(InfoIcon, {});
+      case "warning":
+        return /* @__PURE__ */ jsx9(TriangleAlertIcon, {});
+      default:
+        return /* @__PURE__ */ jsx9(InfoIcon, {});
+    }
+  };
+  return /* @__PURE__ */ jsxs5(Alert, { variant, children: [
+    getIcon(),
+    /* @__PURE__ */ jsx9(AlertTitle, { children: message })
+  ] });
+}
+var AlertComingsoon = ({
+  message = "This feature is coming soon.",
+  variant = "default"
+} = {}) => {
+  toast2.custom(
+    () => /* @__PURE__ */ jsxs5(Alert, { variant, children: [
+      /* @__PURE__ */ jsx9(CircleAlertIcon2, {}),
+      /* @__PURE__ */ jsx9(AlertTitle, { children: message })
+    ] }),
+    {
+      // Toast configuration for better UX
+      position: "top-center",
+      duration: 3e3,
+      // Show for 3 seconds
+      id: `coming-soon-${Date.now()}`
+      // Prevent duplicate toasts
+    }
+  );
+};
+
+// src/components/ui/comingsoon.tsx
+import { cn as cn6 } from "@pelatform/utils";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function ComingSoon({ className, title, description }) {
+  return /* @__PURE__ */ jsx10("div", { className: cn6("h-[calc(100vh-54px)] w-full overflow-hidden", className), children: /* @__PURE__ */ jsx10(
+    HoverBackground,
+    {
+      colors: {
+        background: "bg-gradient-to-br from-black via-gray-900 to-zinc-900",
+        objects: [
+          "bg-emerald-500/30",
+          "bg-teal-500/30",
+          "bg-green-500/30",
+          "bg-lime-500/30",
+          "bg-cyan-500/30",
+          "bg-blue-500/30"
+        ],
+        glow: "shadow-emerald-400/70"
+      },
+      objectCount: 8,
+      children: /* @__PURE__ */ jsxs6("div", { className: "flex h-full flex-col items-center justify-center space-y-4 text-center", children: [
+        title && /* @__PURE__ */ jsx10("h2", { className: "font-bold text-4xl text-white/90", children: title }),
+        description && /* @__PURE__ */ jsx10("p", { className: "max-w-md text-emerald-100/80 text-lg", children: description })
+      ] })
+    }
+  ) });
+}
+
+// src/components/ui/dialog.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var ConfirmDismissDialog = ({
+  open,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+  title = "Discard changes?",
+  description = "You have unsaved changes. Are you sure you want to close this dialog?",
+  confirmText = "Discard changes",
+  cancelText = "Cancel",
+  maxWidth = "md:max-w-[375px]"
+}) => {
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    } else {
+      onOpenChange(false);
+    }
+  };
+  return /* @__PURE__ */ jsx11(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(AlertDialogContent, { className: maxWidth, children: [
+    /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx11(AlertDialogTitle, { children: title }),
+      /* @__PURE__ */ jsx11(AlertDialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs7(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsx11(AlertDialogCancel, { onClick: handleCancel, children: cancelText }),
+      /* @__PURE__ */ jsx11(AlertDialogAction, { onClick: onConfirm, children: confirmText })
+    ] })
+  ] }) });
+};
+
+// src/components/ui/language-switcher.tsx
+import { useTransition } from "react";
+import { GlobeIcon, LanguagesIcon } from "lucide-react";
+import { cn as cn7 } from "@pelatform/utils";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function getFlagUrl(flag) {
+  const flagCode = flag.toLowerCase();
+  return `"https://assets.pelatform.com"/media/flags/${flagCode}.svg`;
+}
+function LanguageSwitcher({
+  className,
+  type = "dropdown",
+  variant = "ghost",
+  size = "default",
+  showNames = true,
+  showFlags = true,
+  label = "Language",
+  i18nEnabled = true,
+  currentLocale,
+  locales,
+  onLocaleChange,
+  customFlagUrl = false,
+  badgeVariant = "info-outline"
+}) {
+  const [isPending, startTransition] = useTransition();
+  const languages = locales ?? [];
+  const currentLanguage = languages.find((l) => l.code === currentLocale);
+  function handleLanguageChange(newLocale) {
+    if (newLocale === currentLocale) return;
+    startTransition(() => {
+      const maybePromise = onLocaleChange?.(newLocale);
+      return maybePromise;
+    });
+  }
+  if (!i18nEnabled && (languages?.length ?? 0) <= 1) {
+    return null;
+  }
+  if (type === "dropdown") {
+    return /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx12(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
+        Button,
+        {
+          variant,
+          size,
+          className: cn7(
+            "group/toggle size-8 px-0 text-foreground ring-0! focus:outline-none! focus:ring-0! focus-visible:outline-none! focus-visible:ring-0! focus-visible:ring-offset-0!",
+            isPending && "cursor-not-allowed opacity-50",
+            className
+          ),
+          disabled: isPending,
+          children: [
+            /* @__PURE__ */ jsx12(LanguagesIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx12("span", { className: "sr-only", children: isPending ? "Changing language..." : "Language dropdown" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx12(
+        DropdownMenuContent,
+        {
+          align: "end",
+          className: "min-w-[150px]",
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          children: languages.map((lang) => /* @__PURE__ */ jsxs8(
+            DropdownMenuItem,
+            {
+              onClick: () => handleLanguageChange(lang.code),
+              className: cn7("gap-2", currentLocale === lang.code && "bg-accent"),
+              children: [
+                showFlags && lang.flag ? /* @__PURE__ */ jsx12(
+                  "img",
+                  {
+                    src: customFlagUrl ? lang.flag : getFlagUrl(lang.flag),
+                    alt: `${lang.name} flag`,
+                    className: "size-4 rounded-full object-cover",
+                    width: 24,
+                    height: 24
+                  }
+                ) : showFlags ? /* @__PURE__ */ jsx12(GlobeIcon, { className: "size-4" }) : null,
+                showNames && /* @__PURE__ */ jsx12("span", { className: "text-sm", children: lang.name }),
+                currentLocale === lang.code && /* @__PURE__ */ jsx12("span", { className: "ms-auto text-muted-foreground text-xs", children: "\u2713" })
+              ]
+            },
+            lang.code
+          ))
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8(DropdownMenuSub, { children: [
+    /* @__PURE__ */ jsxs8(
+      DropdownMenuSubTrigger,
+      {
+        className: cn7(
+          "flex items-center gap-2 data-[state=open]:**:data-[slot=badge]:border-input **:data-[slot=dropdown-menu-sub-trigger-indicator]:hidden hover:**:data-[slot=badge]:border-input",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx12(GlobeIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsxs8("span", { className: "relative flex grow items-center justify-between gap-2", children: [
+            label,
+            currentLanguage && /* @__PURE__ */ jsxs8(Badge, { variant: badgeVariant, className: "absolute end-0 top-1/2 -translate-y-1/2", children: [
+              currentLanguage.name,
+              showFlags && currentLanguage.flag && /* @__PURE__ */ jsx12(
+                "img",
+                {
+                  src: customFlagUrl ? currentLanguage.flag : getFlagUrl(currentLanguage.flag),
+                  alt: currentLanguage.name,
+                  className: "ms-1 size-3.5 rounded-full",
+                  width: 24,
+                  height: 24
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx12(DropdownMenuSubContent, { className: "w-48", children: /* @__PURE__ */ jsx12(
+      DropdownMenuRadioGroup,
+      {
+        value: currentLocale,
+        onValueChange: (value) => handleLanguageChange(value),
+        children: languages.map((item) => /* @__PURE__ */ jsxs8(
+          DropdownMenuRadioItem,
+          {
+            value: item.code,
+            className: "flex items-center gap-2",
+            children: [
+              showFlags && item.flag ? /* @__PURE__ */ jsx12(
+                "img",
+                {
+                  src: customFlagUrl ? item.flag : getFlagUrl(item.flag),
+                  alt: `${item.name} flag`,
+                  className: "size-4 rounded-full object-cover",
+                  width: 24,
+                  height: 24
+                }
+              ) : showFlags ? /* @__PURE__ */ jsx12(GlobeIcon, { className: "size-4" }) : null,
+              /* @__PURE__ */ jsx12("span", { children: item.name })
+            ]
+          },
+          item.code
+        ))
+      }
+    ) })
+  ] });
+}
+
+// src/components/ui/mode-switcher.tsx
+import * as React from "react";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn as cn8, THEME_MODES as THEME_MODES2 } from "@pelatform/utils";
+import { Fragment, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function ModeSwitcher({
+  className,
+  variant = "ghost",
+  size = "default",
+  cycleOrder = [THEME_MODES2.SYSTEM, THEME_MODES2.LIGHT, THEME_MODES2.DARK],
+  type = "toogle",
+  label = {
+    system: "System",
+    dark: "Dark",
+    light: "Light"
+  }
+}) {
+  const { setTheme, theme } = useTheme();
+  const toggleTheme = React.useCallback(() => {
+    const currentIndex = cycleOrder.indexOf(theme);
+    const nextIndex = (currentIndex + 1) % cycleOrder.length;
+    const nextTheme = cycleOrder[nextIndex];
+    setTheme(nextTheme);
+  }, [theme, setTheme, cycleOrder]);
+  const getCurrentIcon = (withLabel = false) => {
+    if (theme === THEME_MODES2.SYSTEM) {
+      return /* @__PURE__ */ jsxs9(Fragment, { children: [
+        /* @__PURE__ */ jsx13(MonitorIcon, {}),
+        " ",
+        withLabel && /* @__PURE__ */ jsx13("span", { children: label.system })
+      ] });
+    }
+    if (theme === THEME_MODES2.DARK) {
+      return /* @__PURE__ */ jsxs9(Fragment, { children: [
+        /* @__PURE__ */ jsx13(MoonIcon, {}),
+        " ",
+        withLabel && /* @__PURE__ */ jsx13("span", { children: label.dark })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs9(Fragment, { children: [
+      /* @__PURE__ */ jsx13(SunIcon, {}),
+      " ",
+      withLabel && /* @__PURE__ */ jsx13("span", { children: label.light })
+    ] });
+  };
+  const isActive = (val) => theme === val;
+  if (type === "toogle") {
+    return /* @__PURE__ */ jsxs9(
+      Button,
+      {
+        size,
+        variant,
+        className: cn8("group/toggle size-8 px-0 text-foreground", className),
+        onClick: toggleTheme,
+        "aria-label": "Switch theme",
+        children: [
+          getCurrentIcon(),
+          /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "Toggle theme" })
+        ]
+      }
+    );
+  }
+  if (type === "dropdown") {
+    return /* @__PURE__ */ jsxs9(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx13(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
+        Button,
+        {
+          size,
+          variant,
+          className: cn8(
+            "group/toggle size-8 px-0 text-foreground ring-0! focus:outline-none! focus:ring-0! focus-visible:outline-none! focus-visible:ring-0! focus-visible:ring-offset-0!",
+            className
+          ),
+          children: [
+            getCurrentIcon(),
+            /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "Toggle theme" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs9(DropdownMenuContent, { align: "end", onCloseAutoFocus: (e) => e.preventDefault(), children: [
+        /* @__PURE__ */ jsxs9(
+          DropdownMenuItem,
+          {
+            className: isActive("light") ? "bg-accent" : "",
+            onClick: () => setTheme("light"),
+            children: [
+              /* @__PURE__ */ jsx13(SunIcon, {}),
+              label.light
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          DropdownMenuItem,
+          {
+            className: isActive("dark") ? "bg-accent" : "",
+            onClick: () => setTheme("dark"),
+            children: [
+              /* @__PURE__ */ jsx13(MoonIcon, {}),
+              label.dark
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          DropdownMenuItem,
+          {
+            className: isActive("system") ? "bg-accent" : "",
+            onClick: () => setTheme("system"),
+            children: [
+              /* @__PURE__ */ jsx13(MonitorIcon, {}),
+              label.system
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx13(
+    DropdownMenuItem,
+    {
+      className,
+      onSelect: (e) => {
+        e.preventDefault();
+        toggleTheme();
+      },
+      children: getCurrentIcon(true)
+    }
+  );
+}
+
+// src/components/ui/screen-loader.tsx
+import { LoaderIcon } from "lucide-react";
+import { cn as cn9 } from "@pelatform/utils";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function ScreenLoader({
+  loadingText = "Loading...",
+  className = "",
+  spinnerClassName,
+  textClassName = "text-muted-foreground font-medium text-sm",
+  contentLoader = false
+} = {}) {
+  if (contentLoader) {
+    return /* @__PURE__ */ jsx14("div", { className: cn9("flex w-full grow items-center justify-center", className), children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsx14(LoaderIcon, { className: cn9("size-6 animate-spin", spinnerClassName) }),
+      /* @__PURE__ */ jsx14("span", { className: textClassName, children: loadingText })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn9(
+        "fixed inset-0 z-500 flex flex-col items-center justify-center gap-2 bg-background transition-opacity duration-700 ease-in-out",
+        className
+      ),
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": loadingText,
+      children: [
+        /* @__PURE__ */ jsx14(LoaderIcon, { className: cn9("size-6 animate-spin", spinnerClassName) }),
+        /* @__PURE__ */ jsx14("div", { className: textClassName, children: loadingText })
+      ]
+    }
+  );
+}
+
+// src/components/ui/toolbar.tsx
+import { cn as cn10 } from "@pelatform/utils";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Toolbar = ({ children }) => {
+  return /* @__PURE__ */ jsx15("div", { className: "flex grow items-center justify-between gap-2.5 pb-5", children });
+};
+var ToolbarHeading = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx15("div", { className: cn10("flex flex-col flex-wrap gap-px", className), children });
+};
+var ToolbarTitle = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx15("h1", { className: cn10("font-semibold text-foreground text-lg", className), children });
+};
+var ToolbarActions = ({ children }) => {
+  return /* @__PURE__ */ jsx15("div", { className: "flex flex-wrap items-center gap-1.5 lg:gap-3.5", children });
+};
+
+// src/components/ui/user-avatar.tsx
+import { cva } from "class-variance-authority";
+import { cn as cn11 } from "@pelatform/utils";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var avatarStatusVariants = cva(
+  "flex size-2 items-center rounded-full border-2 border-background",
+  {
+    variants: {
+      variant: {
+        online: "bg-green-600",
+        offline: "bg-zinc-400 dark:bg-zinc-500",
+        busy: "bg-yellow-600",
+        away: "bg-blue-600"
+      }
+    },
+    defaultVariants: {
+      variant: "online"
+    }
+  }
+);
+function UserAvatar({ className, indicator = false, src, alt }) {
+  const name = alt ?? "User";
+  const initial = getInitials(name);
+  return /* @__PURE__ */ jsxs11(Avatar, { className, children: [
+    /* @__PURE__ */ jsx16(AvatarImage, { src: src ?? void 0, alt: name }),
+    /* @__PURE__ */ jsx16(AvatarFallback, { children: initial }),
+    indicator && /* @__PURE__ */ jsx16(AvatarIndicator, { className: "-end-2 -top-2", children: /* @__PURE__ */ jsx16(AvatarStatus, { variant: "online", className: "size-2.5" }) })
+  ] });
+}
+var getInitials = (name, count) => {
+  if (!name || typeof name !== "string") {
+    return "";
+  }
+  const initials = name.split(" ").filter(Boolean).map((part) => part[0].toUpperCase());
+  return count && count > 0 ? initials.slice(0, count).join("") : initials.join("");
+};
+function AvatarIndicator({ className, ...props }) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      "data-slot": "avatar-indicator",
+      className: cn11("absolute flex size-6 items-center justify-center", className),
+      ...props
+    }
+  );
+}
+function AvatarStatus({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      "data-slot": "avatar-status",
+      className: cn11(avatarStatusVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 export {
+  AlertComingsoon,
+  AlertNotification,
+  AlertToast,
+  ComingSoon,
+  ConfirmDismissDialog,
   Icons,
-  Logo
+  LanguageSwitcher,
+  Logo,
+  MainNav,
+  MobileNav,
+  MobileNavItemRenderer,
+  ModeSwitcher,
+  QueryProvider,
+  ScreenLoader,
+  SiteFooter,
+  SiteHeader,
+  ThemeProvider,
+  Toolbar,
+  ToolbarActions,
+  ToolbarHeading,
+  ToolbarTitle,
+  UserAvatar,
+  getInitials
 };