pelatform-ui 1.2.4 → 1.2.6

package/dist/components.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ComponentProps, ReactNode, HTMLAttributes, FC, DragEvent, RefObject } from 'react';
-import { Alert, badgeVariants, Button } from '@pelatform/ui.components/base';
+import { Alert, badgeVariants, Button } from '@pelatform/ui.components/radix';
 import { B as BaseComponentProps, L as LinkComponentProps, I as ImageComponentProps } from './components-B1rw2xzN.js';
 import { QueryClient } from '@tanstack/react-query';
 import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
@@ -2634,7 +2634,7 @@ declare const ToolbarActions: ({ children }: BaseComponentProps) => react_jsx_ru
 
 /**
  * User Avatar Component
- * Displays user profile pictures with fallback initials
+ * Displays user profile pictures with fallback initials and optional status indicators
  * Built on top of the base Avatar component with enhanced user-specific features
  */
 /**
@@ -2643,6 +2643,8 @@ declare const ToolbarActions: ({ children }: BaseComponentProps) => react_jsx_ru
 interface UserAvatarProps {
     /** Additional CSS classes for styling */
     className?: string;
+    /** Whether to show online status indicator */
+    indicator?: boolean;
     /** Source URL for the user's profile image */
     src?: string | null | undefined;
     /** Alt text for the image, also used to generate initials */
@@ -2652,16 +2654,19 @@ interface UserAvatarProps {
  * UserAvatar Component
  *
  * Displays a user's profile picture with automatic fallback to initials
- * when no image is available.
+ * when no image is available. Supports optional online status indicators
+ * and follows accessibility best practices.
  *
  * Features:
  * - Automatic initials generation from name
  * - Fallback handling for missing images
+ * - Optional online status indicator
  * - Accessible alt text support
  * - Customizable styling
  *
  * @param props - Component props
  * @param props.className - Additional CSS classes for styling
+ * @param props.indicator - Whether to show online status indicator (default: false)
  * @param props.src - Source URL for the user's profile image
  * @param props.alt - Alt text for the image, also used to generate initials
  * @returns JSX element containing the user avatar
@@ -2674,6 +2679,13 @@ interface UserAvatarProps {
  *   alt="John Doe"
  * />
  *
+ * // Avatar with online indicator
+ * <UserAvatar
+ *   src="https://example.com/avatar.jpg"
+ *   alt="Jane Smith"
+ *   indicator={true}
+ * />
+ *
  * // Avatar with fallback initials (no image)
  * <UserAvatar
  *   alt="Bob Johnson"
@@ -2687,6 +2699,7 @@ interface UserAvatarProps {
  *       key={user.id}
  *       src={user.avatar}
  *       alt={user.name}
+ *       indicator={user.isOnline}
  *       className="w-8 h-8"
  *     />
  *   ))}
@@ -2697,6 +2710,7 @@ interface UserAvatarProps {
  *   <UserAvatar
  *     src={currentUser.avatar}
  *     alt={currentUser.name}
+ *     indicator={true}
  *     className="w-16 h-16"
  *   />
  *   <div>
@@ -2706,7 +2720,7 @@ interface UserAvatarProps {
  * </div>
  * ```
  */
-declare function UserAvatar({ className, src, alt }: UserAvatarProps): react_jsx_runtime.JSX.Element;
+declare function UserAvatar({ className, indicator, src, alt }: UserAvatarProps): react_jsx_runtime.JSX.Element;
 /**
  * Utility function to generate initials from a name
  *

package/dist/components.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-NOAZYT3J.js";
 import {
   cn
-} from "./chunk-7EOSDFS3.js";
+} from "./chunk-QEWGMDVY.js";
 import {
   DEFAULT_THEME_MODE,
   THEME_MODES
@@ -20,7 +20,7 @@ import {
   TriangleAlertIcon
 } from "lucide-react";
 import { toast } from "sonner";
-import { Alert, AlertTitle } from "@pelatform/ui.components/base";
+import { Alert, AlertTitle } from "@pelatform/ui.components/radix";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconMap = {
   primary: /* @__PURE__ */ jsx(CircleAlertIcon, {}),
@@ -98,7 +98,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from "@pelatform/ui.components/base";
+} from "@pelatform/ui.components/radix";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ConfirmDismissDialog = ({
   open,
@@ -165,7 +165,7 @@ function ScreenLoader({
 }
 
 // src/components/layout/auth.tsx
-import { Card, CardContent } from "@pelatform/ui.components/base";
+import { Card, CardContent } from "@pelatform/ui.components/radix";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function LayoutAuth({
   children,
@@ -297,7 +297,7 @@ function ComingSoon({ className, title, description }) {
 }
 
 // src/components/layout/error.tsx
-import { Badge } from "@pelatform/ui.components/base";
+import { Badge } from "@pelatform/ui.components/radix";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function ErrorComponents({
   className,
@@ -327,7 +327,7 @@ function ErrorComponents({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx9(Badge, { variant: "destructive", className: "mb-3", children: "404 Error" }),
+      /* @__PURE__ */ jsx9(Badge, { variant: "destructive-outline", className: "mb-3", children: "404 Error" }),
       /* @__PURE__ */ jsx9("h3", { className: "mb-2 text-center font-semibold text-2xl text-foreground", children: textTitle }),
       /* @__PURE__ */ jsx9("div", { className: "mb-10 text-center text-base text-secondary-foreground", children: textSubtitle })
     ] });
@@ -352,7 +352,7 @@ function ErrorComponents({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx9(Badge, { variant: "destructive", className: "mb-3", children: "500 Error" }),
+      /* @__PURE__ */ jsx9(Badge, { variant: "destructive-outline", className: "mb-3", children: "500 Error" }),
       /* @__PURE__ */ jsx9("h3", { className: "mb-2 text-center font-semibold text-2xl text-foreground", children: textTitle }),
       /* @__PURE__ */ jsx9("div", { className: "mb-10 text-center text-base text-secondary-foreground", children: textSubtitle }),
       button
@@ -484,7 +484,7 @@ function CodeDisplay({
 
 // src/components/mdx/download.tsx
 import { DownloadIcon } from "lucide-react";
-import { Button } from "@pelatform/ui.components/base";
+import { Button } from "@pelatform/ui.components/radix";
 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: [
@@ -565,7 +565,7 @@ function Youtube({ id }) {
 
 // src/components/navigation/back-link.tsx
 import { ChevronLeftIcon } from "lucide-react";
-import { Button as Button2 } from "@pelatform/ui.components/base";
+import { Button as Button2 } from "@pelatform/ui.components/radix";
 import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function BackLink({ Link = DefaultLink, children, href, className }) {
   return /* @__PURE__ */ jsxs13(
@@ -595,7 +595,7 @@ 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 { Button as Button3, CommandDialog, CommandInput, CommandList } from "@pelatform/ui.components/radix";
 import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function CommandMenu({
   children,
@@ -680,7 +680,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
-} from "@pelatform/ui.components/base";
+} from "@pelatform/ui.components/radix";
 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)) }) });
@@ -694,7 +694,7 @@ function NavItemRenderer({ Link = DefaultLink, item, pathname, level }) {
   ) ?? false : item.href === pathname || item.href !== "/" && item.href && pathname?.startsWith(item.href);
   if (hasChildren && level <= 3) {
     return /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx24(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsx24(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
         "button",
         {
           className: cn(
@@ -777,7 +777,7 @@ function ChildNavItemRenderer({ Link = DefaultLink, item, pathname, level }) {
       )) })
     ] });
   }
-  return /* @__PURE__ */ jsx24(DropdownMenuItem, { children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx24(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs15(
     Link,
     {
       href: item.href || "",
@@ -808,7 +808,7 @@ import {
   DrawerDescription,
   DrawerTitle,
   DrawerTrigger
-} from "@pelatform/ui.components/base";
+} from "@pelatform/ui.components/radix";
 import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function MobileNav({ children, className }) {
   const { setMetaColor, metaColor } = useMetaColor();
@@ -2916,7 +2916,7 @@ 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 { Alert as Alert2, AlertTitle as AlertTitle2 } from "@pelatform/ui.components/radix";
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var QueryProvider = ({
   client: clientProps,
@@ -2986,7 +2986,7 @@ var QueryProvider = ({
 
 // src/components/providers/theme-provider.tsx
 import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { TooltipProvider } from "@pelatform/ui.components/base";
+import { TooltipProvider } from "@pelatform/ui.components/radix";
 import { jsx as jsx28 } from "react/jsx-runtime";
 function ThemeProvider({ children, ...props }) {
   return /* @__PURE__ */ jsx28(
@@ -3000,13 +3000,13 @@ function ThemeProvider({ children, ...props }) {
       storageKey: "theme",
       themes: [THEME_MODES.LIGHT, THEME_MODES.DARK, THEME_MODES.SYSTEM],
       ...props,
-      children: /* @__PURE__ */ jsx28(TooltipProvider, { delay: 0, children })
+      children: /* @__PURE__ */ jsx28(TooltipProvider, { delayDuration: 0, children })
     }
   );
 }
 
 // src/components/ui/announcement.tsx
-import { Badge as Badge2 } from "@pelatform/ui.components/base";
+import { Badge as Badge2 } from "@pelatform/ui.components/radix";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Announcement = ({
   variant = "outline",
@@ -3469,7 +3469,7 @@ import {
   DropdownMenuSubContent as DropdownMenuSubContent2,
   DropdownMenuSubTrigger as DropdownMenuSubTrigger2,
   DropdownMenuTrigger as DropdownMenuTrigger2
-} from "@pelatform/ui.components/base";
+} from "@pelatform/ui.components/radix";
 import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 function getFlagUrl(flag) {
   const flagCode = flag.toLowerCase();
@@ -3505,7 +3505,7 @@ function LanguageSwitcher({
   }
   if (type === "dropdown") {
     return /* @__PURE__ */ jsxs23(DropdownMenu2, { children: [
-      /* @__PURE__ */ jsx35(DropdownMenuTrigger2, { children: /* @__PURE__ */ jsxs23(
+      /* @__PURE__ */ jsx35(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs23(
         Button5,
         {
           variant,
@@ -3522,28 +3522,36 @@ function LanguageSwitcher({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx35(DropdownMenuContent2, { align: "end", className: "min-w-[150px]", children: languages.map((lang) => /* @__PURE__ */ jsxs23(
-        DropdownMenuItem2,
+      /* @__PURE__ */ jsx35(
+        DropdownMenuContent2,
         {
-          onClick: () => handleLanguageChange(lang.code),
-          className: cn("gap-2", currentLocale === lang.code && "bg-accent"),
-          children: [
-            showFlags && lang.flag ? /* @__PURE__ */ jsx35(
-              Image2,
-              {
-                src: customFlagUrl ? lang.flag : getFlagUrl(lang.flag),
-                alt: `${lang.name} flag`,
-                className: "size-4 rounded-full object-cover",
-                width: 24,
-                height: 24
-              }
-            ) : 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" })
-          ]
-        },
-        lang.code
-      )) })
+          align: "end",
+          className: "min-w-[150px]",
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          children: languages.map((lang) => /* @__PURE__ */ jsxs23(
+            DropdownMenuItem2,
+            {
+              onClick: () => handleLanguageChange(lang.code),
+              className: cn("gap-2", currentLocale === lang.code && "bg-accent"),
+              children: [
+                showFlags && lang.flag ? /* @__PURE__ */ jsx35(
+                  Image2,
+                  {
+                    src: customFlagUrl ? lang.flag : getFlagUrl(lang.flag),
+                    alt: `${lang.name} flag`,
+                    className: "size-4 rounded-full object-cover",
+                    width: 24,
+                    height: 24
+                  }
+                ) : 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" })
+              ]
+            },
+            lang.code
+          ))
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs23(DropdownMenuSub2, { children: [
@@ -3636,7 +3644,7 @@ import {
   DropdownMenuContent as DropdownMenuContent3,
   DropdownMenuItem as DropdownMenuItem3,
   DropdownMenuTrigger as DropdownMenuTrigger3
-} from "@pelatform/ui.components/base";
+} from "@pelatform/ui.components/radix";
 import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function ModeSwitcher({
   className,
@@ -3697,7 +3705,7 @@ function ModeSwitcher({
   }
   if (type === "dropdown") {
     return /* @__PURE__ */ jsxs24(DropdownMenu3, { children: [
-      /* @__PURE__ */ jsx37(DropdownMenuTrigger3, { children: /* @__PURE__ */ jsxs24(
+      /* @__PURE__ */ jsx37(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsxs24(
         Button6,
         {
           size,
@@ -3712,7 +3720,7 @@ function ModeSwitcher({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxs24(DropdownMenuContent3, { align: "end", children: [
+      /* @__PURE__ */ jsxs24(DropdownMenuContent3, { align: "end", onCloseAutoFocus: (e) => e.preventDefault(), children: [
         /* @__PURE__ */ jsxs24(
           DropdownMenuItem3,
           {
@@ -3880,14 +3888,32 @@ var ToolbarActions = ({ children }) => {
 };
 
 // src/components/ui/user-avatar.tsx
-import { Avatar, AvatarFallback, AvatarImage } from "@pelatform/ui.components/base";
+import { cva } from "class-variance-authority";
+import { Avatar, AvatarFallback, AvatarImage } from "@pelatform/ui.components/radix";
 import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
-function UserAvatar({ className, src, alt }) {
+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__ */ jsxs26(Avatar, { className, children: [
     /* @__PURE__ */ jsx40(AvatarImage, { src: src ?? void 0, alt: name }),
-    /* @__PURE__ */ jsx40(AvatarFallback, { children: initial })
+    /* @__PURE__ */ jsx40(AvatarFallback, { children: initial }),
+    indicator && /* @__PURE__ */ jsx40(AvatarIndicator, { className: "-end-2 -top-2", children: /* @__PURE__ */ jsx40(AvatarStatus, { variant: "online", className: "size-2.5" }) })
   ] });
 }
 var getInitials = (name, count) => {
@@ -3897,6 +3923,30 @@ var getInitials = (name, count) => {
   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__ */ jsx40(
+    "div",
+    {
+      "data-slot": "avatar-indicator",
+      className: cn("absolute flex size-6 items-center justify-center", className),
+      ...props
+    }
+  );
+}
+function AvatarStatus({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx40(
+    "div",
+    {
+      "data-slot": "avatar-status",
+      className: cn(avatarStatusVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 
 // src/components/utils/fonts.tsx
 import { jsx as jsx41 } from "react/jsx-runtime";

package/dist/index.d.ts

@@ -1,7 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default, { ComponentType, SVGProps } from 'react';
-import { ClassValue } from 'clsx';
-export { D as DEFAULT_THEME_MODE, M as META_THEME_COLORS, T as THEME_MODES, a as ThemeMode } from './colors-CUDWvz1g.js';
 export { B as BaseComponentProps, I as ImageComponentProps, L as LinkComponentProps } from './components-B1rw2xzN.js';
 
 /**
@@ -83,8 +81,6 @@ declare const Icons: {
     Zoom: (props: IconProps) => react_jsx_runtime.JSX.Element;
 };
 
-declare function cn(...inputs: ClassValue[]): string;
-
 /**
  * Menu item interface
  */
@@ -127,4 +123,4 @@ interface MenuItem {
  */
 type MenuConfig = MenuItem[];
 
-export { Icons, type MenuConfig, type MenuItem, cn };
+export { Icons, type MenuConfig, type MenuItem };

package/dist/index.js

@@ -1,12 +1,3 @@
-import {
-  cn
-} from "./chunk-7EOSDFS3.js";
-import {
-  DEFAULT_THEME_MODE,
-  META_THEME_COLORS,
-  THEME_MODES
-} from "./chunk-HW52LCWN.js";
-
 // src/components/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var Icons = {
@@ -628,9 +619,5 @@ var Icons = {
   ) })
 };
 export {
-  DEFAULT_THEME_MODE,
-  Icons,
-  META_THEME_COLORS,
-  THEME_MODES,
-  cn
+  Icons
 };

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+import { ClassValue } from 'clsx';
+export { D as DEFAULT_THEME_MODE, M as META_THEME_COLORS, T as THEME_MODES, a as ThemeMode } from './colors-CUDWvz1g.js';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.js

@@ -0,0 +1,14 @@
+import {
+  cn
+} from "./chunk-QEWGMDVY.js";
+import {
+  DEFAULT_THEME_MODE,
+  META_THEME_COLORS,
+  THEME_MODES
+} from "./chunk-HW52LCWN.js";
+export {
+  DEFAULT_THEME_MODE,
+  META_THEME_COLORS,
+  THEME_MODES,
+  cn
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pelatform-ui",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "A Modern and Minimal React UI Library built with TailwindCSS.",
   "author": "Pelatform",
   "license": "MIT",
@@ -24,17 +24,21 @@
       "types": "./dist/base.d.ts",
       "default": "./dist/base.js"
     },
-    "./radix": {
-      "types": "./dist/radix.d.ts",
-      "radix": "./dist/radix.js"
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "default": "./dist/components.js"
     },
     "./hooks": {
       "types": "./dist/hooks.d.ts",
       "default": "./dist/hooks.js"
     },
-    "./components": {
-      "types": "./dist/components.d.ts",
-      "default": "./dist/components.js"
+    "./radix": {
+      "types": "./dist/radix.d.ts",
+      "default": "./dist/radix.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "default": "./dist/utils.js"
     }
   },
   "scripts": {
@@ -80,8 +84,8 @@
     "@tanstack/react-query": "^5.90.21",
     "@types/node": "^25.3.3",
     "@types/react": "^19.2.14",
-    "lucide-react": "^0.576.0",
-    "motion": "^12.34.5",
+    "lucide-react": "^0.577.0",
+    "motion": "^12.35.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",