pelatform-ui 1.2.0 → 1.2.1

package/dist/components.js

@@ -1,55 +1,7 @@
 "use client";
-import {
-  HoverBackground,
-  motion,
-  useAnimationFrame,
-  useMotionTemplate,
-  useMotionValue,
-  useTransform
-} from "./chunk-B3I74Y4P.js";
-import {
-  Alert,
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertTitle,
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Badge,
-  Button,
-  Card,
-  CardContent,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerTitle,
-  DrawerTrigger,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-  TooltipProvider
-} from "./chunk-WFCSII5G.js";
 import {
   useMetaColor
-} from "./chunk-5YSCAE7Y.js";
+} from "./chunk-NOAZYT3J.js";
 import {
   cn
 } from "./chunk-7EOSDFS3.js";
@@ -57,44 +9,25 @@ import {
   DEFAULT_THEME_MODE,
   THEME_MODES
 } from "./chunk-HW52LCWN.js";
-import {
-  toast
-} from "./chunk-4OZO7TEB.js";
-import {
-  ArrowUpRight,
-  Check,
-  ChevronDown,
-  ChevronLeft,
-  CircleAlert,
-  CircleCheck,
-  CircleX,
-  Download,
-  Globe,
-  Info,
-  Languages,
-  Loader,
-  Menu,
-  Monitor,
-  Moon,
-  Plus,
-  Search,
-  Sun,
-  TriangleAlert
-} from "./chunk-FC24ZVEO.js";
-import {
-  J,
-  z
-} from "./chunk-BQXV2NHY.js";
-import "./chunk-4VNS5WPM.js";
 
 // src/components/feedback/alert.tsx
+import {
+  CheckIcon,
+  CircleAlertIcon,
+  CircleCheckIcon,
+  CircleXIcon,
+  InfoIcon,
+  TriangleAlertIcon
+} from "lucide-react";
+import { toast } from "sonner";
+import { Alert, AlertTitle } from "@pelatform/ui.components/base";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconMap = {
-  primary: /* @__PURE__ */ jsx(CircleAlert, {}),
-  success: /* @__PURE__ */ jsx(CircleCheck, {}),
-  info: /* @__PURE__ */ jsx(Info, {}),
-  warning: /* @__PURE__ */ jsx(TriangleAlert, {}),
-  destructive: /* @__PURE__ */ jsx(CircleX, {})
+  primary: /* @__PURE__ */ jsx(CircleAlertIcon, {}),
+  success: /* @__PURE__ */ jsx(CircleCheckIcon, {}),
+  info: /* @__PURE__ */ jsx(InfoIcon, {}),
+  warning: /* @__PURE__ */ jsx(TriangleAlertIcon, {}),
+  destructive: /* @__PURE__ */ jsx(CircleXIcon, {})
 };
 function AlertToast({
   message = "This is a toast",
@@ -119,15 +52,15 @@ function AlertNotification({ message, variant = "info" }) {
   const getIcon = () => {
     switch (variant) {
       case "destructive":
-        return /* @__PURE__ */ jsx(CircleAlert, {});
+        return /* @__PURE__ */ jsx(CircleAlertIcon, {});
       case "success":
-        return /* @__PURE__ */ jsx(Check, {});
+        return /* @__PURE__ */ jsx(CheckIcon, {});
       case "info":
-        return /* @__PURE__ */ jsx(Info, {});
+        return /* @__PURE__ */ jsx(InfoIcon, {});
       case "warning":
-        return /* @__PURE__ */ jsx(TriangleAlert, {});
+        return /* @__PURE__ */ jsx(TriangleAlertIcon, {});
       default:
-        return /* @__PURE__ */ jsx(Info, {});
+        return /* @__PURE__ */ jsx(InfoIcon, {});
     }
   };
   return /* @__PURE__ */ jsxs(Alert, { variant, children: [
@@ -141,7 +74,7 @@ var AlertComingsoon = ({
 } = {}) => {
   toast.custom(
     () => /* @__PURE__ */ jsxs(Alert, { variant, children: [
-      /* @__PURE__ */ jsx(CircleAlert, {}),
+      /* @__PURE__ */ jsx(CircleAlertIcon, {}),
       /* @__PURE__ */ jsx(AlertTitle, { children: message })
     ] }),
     {
@@ -156,6 +89,16 @@ var AlertComingsoon = ({
 };
 
 // src/components/feedback/dialog.tsx
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "@pelatform/ui.components/base";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ConfirmDismissDialog = ({
   open,
@@ -188,6 +131,7 @@ var ConfirmDismissDialog = ({
 };
 
 // src/components/feedback/screen-loader.tsx
+import { LoaderIcon } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ScreenLoader({
   loadingText = "Loading...",
@@ -198,7 +142,7 @@ function ScreenLoader({
 } = {}) {
   if (contentLoader) {
     return /* @__PURE__ */ jsx3("div", { className: cn("flex w-full grow items-center justify-center", className), children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2.5", children: [
-      /* @__PURE__ */ jsx3(Loader, { className: cn("animate-spin", spinnerClassName) }),
+      /* @__PURE__ */ jsx3(LoaderIcon, { className: cn("animate-spin", spinnerClassName) }),
       /* @__PURE__ */ jsx3("span", { className: textClassName, children: loadingText })
     ] }) });
   }
@@ -213,7 +157,7 @@ function ScreenLoader({
       "aria-live": "polite",
       "aria-label": loadingText,
       children: [
-        /* @__PURE__ */ jsx3(Loader, { className: cn("animate-spin", spinnerClassName) }),
+        /* @__PURE__ */ jsx3(LoaderIcon, { className: cn("animate-spin", spinnerClassName) }),
         /* @__PURE__ */ jsx3("div", { className: textClassName, children: loadingText })
       ]
     }
@@ -221,6 +165,7 @@ function ScreenLoader({
 }
 
 // src/components/layout/auth.tsx
+import { Card, CardContent } from "@pelatform/ui.components/base";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function LayoutAuth({
   children,
@@ -324,6 +269,7 @@ function Body({ slug, children, className }) {
 }
 
 // src/components/layout/comingsoon.tsx
+import { HoverBackground } from "@pelatform/ui.components/animation";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function ComingSoon({ className, title, description }) {
   return /* @__PURE__ */ jsx8("div", { className: cn("h-[calc(100vh-54px)] w-full overflow-hidden", className), children: /* @__PURE__ */ jsx8(
@@ -351,6 +297,7 @@ function ComingSoon({ className, title, description }) {
 }
 
 // src/components/layout/error.tsx
+import { Badge } from "@pelatform/ui.components/base";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function ErrorComponents({
   className,
@@ -435,6 +382,9 @@ function ErrorComponents({
   ] });
 }
 
+// src/components/layout/section.tsx
+import { PlusIcon } from "lucide-react";
+
 // src/components/ui/grid-background.tsx
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var GridBackground = ({
@@ -484,7 +434,7 @@ import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var Cross = () => /* @__PURE__ */ jsxs10("div", { className: "relative h-6 w-6", children: [
   /* @__PURE__ */ jsx11("div", { className: "absolute start-3 h-6 w-px bg-background" }),
   /* @__PURE__ */ jsx11("div", { className: "absolute top-3 h-px w-6 bg-background" }),
-  /* @__PURE__ */ jsx11("div", { className: "absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx11(Plus, { size: 20, className: "text-border/70 dark:text-border" }) })
+  /* @__PURE__ */ jsx11("div", { className: "absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx11(PlusIcon, { size: 20, className: "text-border/70 dark:text-border" }) })
 ] });
 var Section = ({ children, sectionClassName, className, ...props }) => /* @__PURE__ */ jsx11("section", { className: sectionClassName, ...props, children: /* @__PURE__ */ jsxs10("div", { className: "grid-container relative mx-auto", children: [
   /* @__PURE__ */ jsx11(GridBackground, { maxWidthClass: "grid-container" }),
@@ -533,10 +483,12 @@ function CodeDisplay({
 }
 
 // src/components/mdx/download.tsx
+import { DownloadIcon } from "lucide-react";
+import { Button } from "@pelatform/ui.components/base";
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function DownloadFile({ children, className, href }) {
   return /* @__PURE__ */ jsx16("div", { className: "inline-flex pb-4", children: /* @__PURE__ */ jsx16(Button, { size: "lg", className: cn("rounded-full", className), children: /* @__PURE__ */ jsxs12("a", { href, target: "_blank", rel: "noopener noreferrer", children: [
-    /* @__PURE__ */ jsx16(Download, { className: "me-2 size-5" }),
+    /* @__PURE__ */ jsx16(DownloadIcon, { className: "me-2 size-5" }),
     children
   ] }) }) });
 }
@@ -612,6 +564,8 @@ function Youtube({ id }) {
 }
 
 // src/components/navigation/back-link.tsx
+import { ChevronLeftIcon } from "lucide-react";
+import { Button as Button2 } from "@pelatform/ui.components/base";
 import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function BackLink({ Link = DefaultLink, children, href, className }) {
   return /* @__PURE__ */ jsxs13(
@@ -624,12 +578,12 @@ function BackLink({ Link = DefaultLink, children, href, className }) {
       ),
       children: [
         /* @__PURE__ */ jsx22(
-          Button,
+          Button2,
           {
             size: "icon",
             variant: "secondary",
             className: "size-7.5! transition-transform duration-100 group-hover:-translate-x-0.5",
-            children: /* @__PURE__ */ jsx22(ChevronLeft, {})
+            children: /* @__PURE__ */ jsx22(ChevronLeftIcon, {})
           }
         ),
         /* @__PURE__ */ jsx22("span", { className: "font-semibold text-lg", children })
@@ -640,6 +594,8 @@ function BackLink({ Link = DefaultLink, children, href, className }) {
 
 // src/components/navigation/command-menu.tsx
 import * as React from "react";
+import { SearchIcon } from "lucide-react";
+import { Button as Button3, CommandDialog, CommandInput, CommandList } from "@pelatform/ui.components/base";
 import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function CommandMenu({
   children,
@@ -674,7 +630,7 @@ function CommandMenu({
   }, []);
   return /* @__PURE__ */ jsxs14(Fragment2, { children: [
     /* @__PURE__ */ jsxs14(
-      Button,
+      Button3,
       {
         size: "sm",
         variant: "outline",
@@ -683,7 +639,7 @@ function CommandMenu({
         "aria-label": `Open command menu (${keyHint})`,
         ...props,
         children: [
-          /* @__PURE__ */ jsx23(Search, { className: "me-2 size-4" }),
+          /* @__PURE__ */ jsx23(SearchIcon, { className: "me-2 size-4" }),
           /* @__PURE__ */ jsx23("span", { className: "inline-flex text-muted-foreground", children: searchButtonText }),
           /* @__PURE__ */ jsx23(
             "kbd",
@@ -715,6 +671,16 @@ function CommandMenu({
 }
 
 // src/components/navigation/main-nav.tsx
+import { ArrowUpRightIcon, ChevronDownIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "@pelatform/ui.components/base";
 import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function MainNav({ Link = DefaultLink, pathname, items, className }) {
   return /* @__PURE__ */ jsx24("div", { className: cn("me-4 hidden items-center justify-center md:flex", className), children: /* @__PURE__ */ jsx24("nav", { className: "flex items-center gap-4 font-medium text-sm xl:gap-6", children: items.map((item) => /* @__PURE__ */ jsx24(NavItemRenderer, { Link, item, pathname, level: 1 }, item.title)) }) });
@@ -738,7 +704,7 @@ function NavItemRenderer({ Link = DefaultLink, item, pathname, level }) {
           children: [
             item.icon && /* @__PURE__ */ jsx24(item.icon, {}),
             item.title,
-            /* @__PURE__ */ jsx24(ChevronDown, { className: "size-3.5" })
+            /* @__PURE__ */ jsx24(ChevronDownIcon, { className: "size-3.5" })
           ]
         }
       ) }),
@@ -775,7 +741,7 @@ function NavItemRenderer({ Link = DefaultLink, item, pathname, level }) {
       children: [
         item.icon && /* @__PURE__ */ jsx24(item.icon, {}),
         item.title,
-        item.external && /* @__PURE__ */ jsx24(ArrowUpRight, { className: "size-3.5 opacity-60" })
+        item.external && /* @__PURE__ */ jsx24(ArrowUpRightIcon, { className: "size-3.5 opacity-60" })
       ]
     }
   );
@@ -823,7 +789,7 @@ function ChildNavItemRenderer({ Link = DefaultLink, item, pathname, level }) {
       children: [
         item.icon && /* @__PURE__ */ jsx24(item.icon, {}),
         item.title,
-        item.external && /* @__PURE__ */ jsx24(ArrowUpRight, { className: "size-3.5 opacity-60" })
+        item.external && /* @__PURE__ */ jsx24(ArrowUpRightIcon, { className: "size-3.5 opacity-60" })
       ]
     }
   ) });
@@ -831,6 +797,18 @@ function ChildNavItemRenderer({ Link = DefaultLink, item, pathname, level }) {
 
 // src/components/navigation/mobile-nav.tsx
 import { useCallback as useCallback2, useState as useState2 } from "react";
+import { ArrowUpRightIcon as ArrowUpRightIcon2, ChevronDownIcon as ChevronDownIcon2, MenuIcon } from "lucide-react";
+import {
+  Button as Button4,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger
+} from "@pelatform/ui.components/base";
 import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function MobileNav({ children, className }) {
   const { setMetaColor, metaColor } = useMetaColor();
@@ -843,8 +821,8 @@ function MobileNav({ children, className }) {
     [setMetaColor, metaColor]
   );
   return /* @__PURE__ */ jsx25("div", { className: cn("flex items-center gap-2.5 md:hidden", className), children: /* @__PURE__ */ jsxs16(Drawer, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx25(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs16(Button, { variant: "ghost", className: "group/toggle size-8 px-0 text-foreground", children: [
-      /* @__PURE__ */ jsx25(Menu, {}),
+    /* @__PURE__ */ jsx25(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs16(Button4, { variant: "ghost", className: "group/toggle size-8 px-0 text-foreground", children: [
+      /* @__PURE__ */ jsx25(MenuIcon, {}),
       /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Toggle Menu" })
     ] }) }),
     /* @__PURE__ */ jsxs16(DrawerContent, { className: "max-h-[60svh] p-0", children: [
@@ -884,7 +862,7 @@ function MobileNavItemRenderer({
             item.icon && /* @__PURE__ */ jsx25(item.icon, {}),
             item.title,
             /* @__PURE__ */ jsx25(
-              ChevronDown,
+              ChevronDownIcon2,
               {
                 className: cn(
                   "ms-auto size-3.5 opacity-60 transition-transform",
@@ -925,7 +903,7 @@ function MobileNavItemRenderer({
       children: [
         item.icon && /* @__PURE__ */ jsx25(item.icon, {}),
         item.title,
-        item.external && /* @__PURE__ */ jsx25(ArrowUpRight, { className: "ms-1 size-3.5 opacity-60" })
+        item.external && /* @__PURE__ */ jsx25(ArrowUpRightIcon2, { className: "ms-1 size-3.5 opacity-60" })
       ]
     }
   );
@@ -2936,6 +2914,9 @@ var QueryClientProvider = ({
 };
 
 // src/components/providers/query-provider.tsx
+import { CircleAlertIcon as CircleAlertIcon2 } from "lucide-react";
+import { toast as toast2 } from "sonner";
+import { Alert as Alert2, AlertTitle as AlertTitle2 } from "@pelatform/ui.components/base";
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var QueryProvider = ({
   client: clientProps,
@@ -2983,10 +2964,10 @@ var QueryProvider = ({
               timestamp: (/* @__PURE__ */ new Date()).toISOString()
             });
           }
-          toast.custom(
-            () => /* @__PURE__ */ jsxs17(Alert, { variant: "default", children: [
-              /* @__PURE__ */ jsx27(CircleAlert, {}),
-              /* @__PURE__ */ jsx27(AlertTitle, { children: message })
+          toast2.custom(
+            () => /* @__PURE__ */ jsxs17(Alert2, { variant: "default", children: [
+              /* @__PURE__ */ jsx27(CircleAlertIcon2, {}),
+              /* @__PURE__ */ jsx27(AlertTitle2, { children: message })
             ] }),
             {
               position: "top-center",
@@ -3004,10 +2985,12 @@ var QueryProvider = ({
 };
 
 // src/components/providers/theme-provider.tsx
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { TooltipProvider } from "@pelatform/ui.components/base";
 import { jsx as jsx28 } from "react/jsx-runtime";
 function ThemeProvider({ children, ...props }) {
   return /* @__PURE__ */ jsx28(
-    J,
+    NextThemesProvider,
     {
       attribute: "class",
       defaultTheme: DEFAULT_THEME_MODE,
@@ -3023,6 +3006,7 @@ function ThemeProvider({ children, ...props }) {
 }
 
 // src/components/ui/announcement.tsx
+import { Badge as Badge2 } from "@pelatform/ui.components/base";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Announcement = ({
   variant = "outline",
@@ -3030,7 +3014,7 @@ var Announcement = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx29(
-  Badge,
+  Badge2,
   {
     variant,
     className: cn(
@@ -3056,6 +3040,7 @@ var AnnouncementTag = ({ className, ...props }) => /* @__PURE__ */ jsx29(
 var AnnouncementTitle = ({ className, ...props }) => /* @__PURE__ */ jsx29("div", { className: cn("flex items-center gap-1 truncate py-1", className), ...props });
 
 // src/components/ui/background-paths.tsx
+import { motion } from "motion/react";
 import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function FloatingPaths({
   position,
@@ -3471,6 +3456,20 @@ var ImageInput = ({
 
 // src/components/ui/language-switcher.tsx
 import { useTransition } from "react";
+import { GlobeIcon, LanguagesIcon } from "lucide-react";
+import {
+  Badge as Badge3,
+  Button as Button5,
+  DropdownMenu as DropdownMenu2,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuItem as DropdownMenuItem2,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub as DropdownMenuSub2,
+  DropdownMenuSubContent as DropdownMenuSubContent2,
+  DropdownMenuSubTrigger as DropdownMenuSubTrigger2,
+  DropdownMenuTrigger as DropdownMenuTrigger2
+} from "@pelatform/ui.components/base";
 import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 function getFlagUrl(flag) {
   const flagCode = flag.toLowerCase();
@@ -3505,9 +3504,9 @@ function LanguageSwitcher({
     return null;
   }
   if (type === "dropdown") {
-    return /* @__PURE__ */ jsxs23(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx35(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs23(
-        Button,
+    return /* @__PURE__ */ jsxs23(DropdownMenu2, { children: [
+      /* @__PURE__ */ jsx35(DropdownMenuTrigger2, { children: /* @__PURE__ */ jsxs23(
+        Button5,
         {
           variant,
           size,
@@ -3518,13 +3517,13 @@ function LanguageSwitcher({
           ),
           disabled: isPending,
           children: [
-            /* @__PURE__ */ jsx35(Languages, { className: "size-4" }),
+            /* @__PURE__ */ jsx35(LanguagesIcon, { className: "size-4" }),
             /* @__PURE__ */ jsx35("span", { className: "sr-only", children: isPending ? "Changing language..." : "Language dropdown" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx35(DropdownMenuContent, { align: "end", className: "min-w-[150px]", children: languages.map((lang) => /* @__PURE__ */ jsxs23(
-        DropdownMenuItem,
+      /* @__PURE__ */ jsx35(DropdownMenuContent2, { align: "end", className: "min-w-[150px]", children: languages.map((lang) => /* @__PURE__ */ jsxs23(
+        DropdownMenuItem2,
         {
           onClick: () => handleLanguageChange(lang.code),
           className: cn("gap-2", currentLocale === lang.code && "bg-accent"),
@@ -3538,7 +3537,7 @@ function LanguageSwitcher({
                 width: 24,
                 height: 24
               }
-            ) : showFlags ? /* @__PURE__ */ jsx35(Globe, { className: "size-4" }) : null,
+            ) : showFlags ? /* @__PURE__ */ jsx35(GlobeIcon, { className: "size-4" }) : null,
             showNames && /* @__PURE__ */ jsx35("span", { className: "text-sm", children: lang.name }),
             currentLocale === lang.code && /* @__PURE__ */ jsx35("span", { className: "ms-auto text-muted-foreground text-xs", children: "\u2713" })
           ]
@@ -3547,19 +3546,19 @@ function LanguageSwitcher({
       )) })
     ] });
   }
-  return /* @__PURE__ */ jsxs23(DropdownMenuSub, { children: [
+  return /* @__PURE__ */ jsxs23(DropdownMenuSub2, { children: [
     /* @__PURE__ */ jsxs23(
-      DropdownMenuSubTrigger,
+      DropdownMenuSubTrigger2,
       {
         className: cn(
           "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__ */ jsx35(Globe, { className: "size-4" }),
+          /* @__PURE__ */ jsx35(GlobeIcon, { className: "size-4" }),
           /* @__PURE__ */ jsxs23("span", { className: "relative flex grow items-center justify-between gap-2", children: [
             label,
-            currentLanguage && /* @__PURE__ */ jsxs23(Badge, { variant: "outline", className: "absolute end-0 top-1/2 -translate-y-1/2", children: [
+            currentLanguage && /* @__PURE__ */ jsxs23(Badge3, { variant: "outline", className: "absolute end-0 top-1/2 -translate-y-1/2", children: [
               currentLanguage.name,
               showFlags && currentLanguage.flag && /* @__PURE__ */ jsx35(
                 Image2,
@@ -3576,7 +3575,7 @@ function LanguageSwitcher({
         ]
       }
     ),
-    /* @__PURE__ */ jsx35(DropdownMenuSubContent, { className: "w-48", children: /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx35(DropdownMenuSubContent2, { className: "w-48", children: /* @__PURE__ */ jsx35(
       DropdownMenuRadioGroup,
       {
         value: currentLocale,
@@ -3596,7 +3595,7 @@ function LanguageSwitcher({
                   width: 24,
                   height: 24
                 }
-              ) : showFlags ? /* @__PURE__ */ jsx35(Globe, { className: "size-4" }) : null,
+              ) : showFlags ? /* @__PURE__ */ jsx35(GlobeIcon, { className: "size-4" }) : null,
               /* @__PURE__ */ jsx35("span", { children: item.name })
             ]
           },
@@ -3629,6 +3628,15 @@ function Logo({ className }) {
 
 // src/components/ui/mode-switcher.tsx
 import * as React3 from "react";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import {
+  Button as Button6,
+  DropdownMenu as DropdownMenu3,
+  DropdownMenuContent as DropdownMenuContent3,
+  DropdownMenuItem as DropdownMenuItem3,
+  DropdownMenuTrigger as DropdownMenuTrigger3
+} from "@pelatform/ui.components/base";
 import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function ModeSwitcher({
   className,
@@ -3642,7 +3650,7 @@ function ModeSwitcher({
     light: "Light"
   }
 }) {
-  const { setTheme, theme } = z();
+  const { setTheme, theme } = useTheme();
   const toggleTheme = React3.useCallback(() => {
     const currentIndex = cycleOrder.indexOf(theme);
     const nextIndex = (currentIndex + 1) % cycleOrder.length;
@@ -3652,20 +3660,20 @@ function ModeSwitcher({
   const getCurrentIcon = (withLabel = false) => {
     if (theme === THEME_MODES.SYSTEM) {
       return /* @__PURE__ */ jsxs24(Fragment4, { children: [
-        /* @__PURE__ */ jsx37(Monitor, {}),
+        /* @__PURE__ */ jsx37(MonitorIcon, {}),
         " ",
         withLabel && /* @__PURE__ */ jsx37("span", { children: label.system })
       ] });
     }
     if (theme === THEME_MODES.DARK) {
       return /* @__PURE__ */ jsxs24(Fragment4, { children: [
-        /* @__PURE__ */ jsx37(Moon, {}),
+        /* @__PURE__ */ jsx37(MoonIcon, {}),
         " ",
         withLabel && /* @__PURE__ */ jsx37("span", { children: label.dark })
       ] });
     }
     return /* @__PURE__ */ jsxs24(Fragment4, { children: [
-      /* @__PURE__ */ jsx37(Sun, {}),
+      /* @__PURE__ */ jsx37(SunIcon, {}),
       " ",
       withLabel && /* @__PURE__ */ jsx37("span", { children: label.light })
     ] });
@@ -3673,7 +3681,7 @@ function ModeSwitcher({
   const isActive = (val) => theme === val;
   if (type === "toogle") {
     return /* @__PURE__ */ jsxs24(
-      Button,
+      Button6,
       {
         size,
         variant,
@@ -3688,9 +3696,9 @@ function ModeSwitcher({
     );
   }
   if (type === "dropdown") {
-    return /* @__PURE__ */ jsxs24(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx37(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs24(
-        Button,
+    return /* @__PURE__ */ jsxs24(DropdownMenu3, { children: [
+      /* @__PURE__ */ jsx37(DropdownMenuTrigger3, { children: /* @__PURE__ */ jsxs24(
+        Button6,
         {
           size,
           variant,
@@ -3704,36 +3712,36 @@ function ModeSwitcher({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxs24(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ jsxs24(DropdownMenuContent3, { align: "end", children: [
         /* @__PURE__ */ jsxs24(
-          DropdownMenuItem,
+          DropdownMenuItem3,
           {
             className: isActive("light") ? "bg-accent" : "",
             onClick: () => setTheme("light"),
             children: [
-              /* @__PURE__ */ jsx37(Sun, {}),
+              /* @__PURE__ */ jsx37(SunIcon, {}),
               label.light
             ]
           }
         ),
         /* @__PURE__ */ jsxs24(
-          DropdownMenuItem,
+          DropdownMenuItem3,
           {
             className: isActive("dark") ? "bg-accent" : "",
             onClick: () => setTheme("dark"),
             children: [
-              /* @__PURE__ */ jsx37(Moon, {}),
+              /* @__PURE__ */ jsx37(MoonIcon, {}),
               label.dark
             ]
           }
         ),
         /* @__PURE__ */ jsxs24(
-          DropdownMenuItem,
+          DropdownMenuItem3,
           {
             className: isActive("system") ? "bg-accent" : "",
             onClick: () => setTheme("system"),
             children: [
-              /* @__PURE__ */ jsx37(Monitor, {}),
+              /* @__PURE__ */ jsx37(MonitorIcon, {}),
               label.system
             ]
           }
@@ -3742,7 +3750,7 @@ function ModeSwitcher({
     ] });
   }
   return /* @__PURE__ */ jsx37(
-    DropdownMenuItem,
+    DropdownMenuItem3,
     {
       className,
       onSelect: (e) => {
@@ -3756,6 +3764,13 @@ function ModeSwitcher({
 
 // src/components/ui/moving-border.tsx
 import { useRef as useRef2 } from "react";
+import {
+  motion as motion2,
+  useAnimationFrame,
+  useMotionTemplate,
+  useMotionValue,
+  useTransform
+} from "motion/react";
 import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 function MovingLabel({
   borderRadius = "1.75rem",
@@ -3834,7 +3849,7 @@ var MovingBorder = ({
       }
     ),
     /* @__PURE__ */ jsx38(
-      motion.div,
+      motion2.div,
       {
         style: {
           position: "absolute",
@@ -3865,6 +3880,7 @@ var ToolbarActions = ({ children }) => {
 };
 
 // src/components/ui/user-avatar.tsx
+import { Avatar, AvatarFallback, AvatarImage } from "@pelatform/ui.components/base";
 import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 function UserAvatar({ className, src, alt }) {
   const name = alt ?? "User";