@serhii.olishevskyi/docs 1.1.2 → 1.1.3

package/dist/index.d.mts

@@ -182,6 +182,14 @@ interface UserStatusChipComponentProps {
     };
 }
 
+interface MyAvatarComponentProps {
+    size?: number;
+    disableBorder?: boolean;
+    disableShadow?: boolean;
+    disablePopover?: boolean;
+    sx?: SxProps<Theme>;
+}
+
 declare const UI: {
     Inputs: {
         TextField: React$1.FC<TextFieldComponentProps>;
@@ -198,6 +206,11 @@ declare const UI: {
         UserPopover: React$1.FC<UserPopoverComponentProps>;
         UserRoleChip: React$1.FC<UserRoleChipComponentProps>;
         UserStatusChip: React$1.FC<UserStatusChipComponentProps>;
+        MyAvatar: React$1.FC<MyAvatarComponentProps>;
+    };
+    Widgets: {
+        ProtectedLanguageSelector: React$1.FC<{}>;
+        PublicLanguageSelector: React$1.FC<{}>;
     };
 };
 
@@ -475,4 +488,4 @@ declare const Providers: {
     readonly AIProvider: React$1.FC<AIProviderProps>;
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps as CopyClipboardButtonProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps as EmailInputProps, type Language, LocalizationProvider, type NumberInputComponentProps as NumberInputProps, Providers, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type TextFieldComponentProps as TextFieldProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps as TranslatableTooltipProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps as UserAvatarProps, type UserPopoverComponentProps as UserPopoverProps, type UserRoleChipComponentProps as UserRoleChipProps, UserSettingsProvider, type UserStatusChipComponentProps as UserStatusChipProps, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps as CopyClipboardButtonProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps as EmailInputProps, type Language, LocalizationProvider, type MyAvatarComponentProps as MyAvatarProps, type NumberInputComponentProps as NumberInputProps, Providers, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type TextFieldComponentProps as TextFieldProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps as TranslatableTooltipProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps as UserAvatarProps, type UserPopoverComponentProps as UserPopoverProps, type UserRoleChipComponentProps as UserRoleChipProps, UserSettingsProvider, type UserStatusChipComponentProps as UserStatusChipProps, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.d.ts

@@ -182,6 +182,14 @@ interface UserStatusChipComponentProps {
     };
 }
 
+interface MyAvatarComponentProps {
+    size?: number;
+    disableBorder?: boolean;
+    disableShadow?: boolean;
+    disablePopover?: boolean;
+    sx?: SxProps<Theme>;
+}
+
 declare const UI: {
     Inputs: {
         TextField: React$1.FC<TextFieldComponentProps>;
@@ -198,6 +206,11 @@ declare const UI: {
         UserPopover: React$1.FC<UserPopoverComponentProps>;
         UserRoleChip: React$1.FC<UserRoleChipComponentProps>;
         UserStatusChip: React$1.FC<UserStatusChipComponentProps>;
+        MyAvatar: React$1.FC<MyAvatarComponentProps>;
+    };
+    Widgets: {
+        ProtectedLanguageSelector: React$1.FC<{}>;
+        PublicLanguageSelector: React$1.FC<{}>;
     };
 };
 
@@ -475,4 +488,4 @@ declare const Providers: {
     readonly AIProvider: React$1.FC<AIProviderProps>;
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps as CopyClipboardButtonProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps as EmailInputProps, type Language, LocalizationProvider, type NumberInputComponentProps as NumberInputProps, Providers, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type TextFieldComponentProps as TextFieldProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps as TranslatableTooltipProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps as UserAvatarProps, type UserPopoverComponentProps as UserPopoverProps, type UserRoleChipComponentProps as UserRoleChipProps, UserSettingsProvider, type UserStatusChipComponentProps as UserStatusChipProps, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps as CopyClipboardButtonProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps as EmailInputProps, type Language, LocalizationProvider, type MyAvatarComponentProps as MyAvatarProps, type NumberInputComponentProps as NumberInputProps, Providers, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type TextFieldComponentProps as TextFieldProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps as TranslatableTooltipProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps as UserAvatarProps, type UserPopoverComponentProps as UserPopoverProps, type UserRoleChipComponentProps as UserRoleChipProps, UserSettingsProvider, type UserStatusChipComponentProps as UserStatusChipProps, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.js

@@ -3452,6 +3452,399 @@ init_CopyClipboardButtonComponent();
 init_UserRoleChipComponent();
 init_UserStatusChipComponent();
 init_UserPopoverComponent();
+
+// src/UI/components/data.display/MyAvatarComponent.tsx
+var import_react23 = require("react");
+var import_material16 = require("@mui/material");
+init_context();
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var getInitials2 = (name) => {
+  if (!name) return "?";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name[0].toUpperCase();
+};
+var MyAvatarComponent = ({
+  size = 40,
+  disableBorder = false,
+  disableShadow = false,
+  disablePopover = false,
+  sx = {}
+}) => {
+  const { profile: userProfile, loading: isLoading } = useAuth();
+  const [anchorEl, setAnchorEl] = (0, import_react23.useState)(null);
+  const handlePopoverOpen = (event) => {
+    if (!disablePopover) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const isPopoverOpen = Boolean(anchorEl);
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_material16.Skeleton,
+      {
+        variant: "circular",
+        width: size,
+        height: size,
+        sx: { display: "inline-block", flexShrink: 0, ...sx }
+      }
+    );
+  }
+  const initials = getInitials2(userProfile?.display_name || "");
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_material16.Avatar,
+      {
+        src: userProfile?.avatar_url || void 0,
+        alt: userProfile?.display_name || "User Avatar",
+        onMouseEnter: handlePopoverOpen,
+        onMouseLeave: handlePopoverClose,
+        sx: {
+          width: size,
+          height: size,
+          fontSize: size * 0.4,
+          fontWeight: 600,
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
+          cursor: disablePopover ? void 0 : "pointer",
+          transition: "transform 0.2s ease, box-shadow 0.2s ease",
+          border: disableBorder ? "none" : "2px solid",
+          borderColor: "background.paper",
+          boxShadow: disableShadow ? "none" : 2,
+          "&:hover": {
+            transform: disablePopover ? "none" : "scale(1.05)"
+          },
+          ...sx
+        },
+        children: !userProfile?.avatar_url && initials
+      }
+    ),
+    !disablePopover && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_material16.Popover,
+      {
+        id: `avatar-popover-${userProfile?.id}`,
+        open: isPopoverOpen,
+        anchorEl,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "center"
+        },
+        onClose: handlePopoverClose,
+        disableRestoreFocus: true,
+        disableAutoFocus: true,
+        disableEnforceFocus: true,
+        sx: {
+          pointerEvents: "none",
+          mt: 1
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              p: 1.5,
+              borderRadius: 2,
+              boxShadow: 3
+            }
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
+          userProfile?.email && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { variant: "caption", color: "text.secondary", children: userProfile.email })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/i18n/LanguageSelector.tsx
+var import_react24 = require("react");
+var import_react_i18next5 = require("react-i18next");
+var import_material17 = require("@mui/material");
+init_LocalizationProvider();
+init_UserSettingsProvider();
+init_SupabaseProvider();
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next5.useTranslation)();
+  const [languages, setLanguages] = (0, import_react24.useState)([]);
+  const [loading, setLoading] = (0, import_react24.useState)(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = (0, import_react24.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react24.useEffect)(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+        if (userSettings.language) changeLanguage(userSettings.language);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    setLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n2.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.IconButton,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_material17.Box,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            import_material17.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_material17.Box,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next5.useTranslation)();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = (0, import_react24.useState)([]);
+  const [loading, setLoading] = (0, import_react24.useState)(true);
+  const [anchorEl, setAnchorEl] = (0, import_react24.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react24.useEffect)(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n2.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.IconButton,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_material17.Box,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            import_material17.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_material17.Box,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+
+// src/UI/index.ts
 var UI = {
   Inputs: {
     TextField: TextFieldComponent,
@@ -3467,11 +3860,16 @@ var UI = {
     UserAvatar: UserAvatarComponent,
     UserPopover: UserPopoverComponent_default,
     UserRoleChip: UserRoleChipComponent,
-    UserStatusChip: UserStatusChipComponent
-  }
+    UserStatusChip: UserStatusChipComponent,
+    MyAvatar: MyAvatarComponent
+  },
   /*Layout: {
     Row: FormRow,
   },*/
+  Widgets: {
+    ProtectedLanguageSelector: LanguageSelector,
+    PublicLanguageSelector
+  }
 };
 
 // src/index.ts

package/dist/index.mjs

@@ -844,6 +844,401 @@ var UserAvatarComponent = ({
   ] });
 };
 
+// src/UI/components/data.display/MyAvatarComponent.tsx
+import { useState as useState6 } from "react";
+import { Avatar as Avatar2, Box as Box4, Popover as Popover2, Typography as Typography3, Skeleton } from "@mui/material";
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var getInitials2 = (name) => {
+  if (!name) return "?";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name[0].toUpperCase();
+};
+var MyAvatarComponent = ({
+  size = 40,
+  disableBorder = false,
+  disableShadow = false,
+  disablePopover = false,
+  sx = {}
+}) => {
+  const { profile: userProfile, loading: isLoading } = useAuth();
+  const [anchorEl, setAnchorEl] = useState6(null);
+  const handlePopoverOpen = (event) => {
+    if (!disablePopover) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const isPopoverOpen = Boolean(anchorEl);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx6(
+      Skeleton,
+      {
+        variant: "circular",
+        width: size,
+        height: size,
+        sx: { display: "inline-block", flexShrink: 0, ...sx }
+      }
+    );
+  }
+  const initials = getInitials2(userProfile?.display_name || "");
+  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    /* @__PURE__ */ jsx6(
+      Avatar2,
+      {
+        src: userProfile?.avatar_url || void 0,
+        alt: userProfile?.display_name || "User Avatar",
+        onMouseEnter: handlePopoverOpen,
+        onMouseLeave: handlePopoverClose,
+        sx: {
+          width: size,
+          height: size,
+          fontSize: size * 0.4,
+          fontWeight: 600,
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
+          cursor: disablePopover ? void 0 : "pointer",
+          transition: "transform 0.2s ease, box-shadow 0.2s ease",
+          border: disableBorder ? "none" : "2px solid",
+          borderColor: "background.paper",
+          boxShadow: disableShadow ? "none" : 2,
+          "&:hover": {
+            transform: disablePopover ? "none" : "scale(1.05)"
+          },
+          ...sx
+        },
+        children: !userProfile?.avatar_url && initials
+      }
+    ),
+    !disablePopover && /* @__PURE__ */ jsx6(
+      Popover2,
+      {
+        id: `avatar-popover-${userProfile?.id}`,
+        open: isPopoverOpen,
+        anchorEl,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "center"
+        },
+        onClose: handlePopoverClose,
+        disableRestoreFocus: true,
+        disableAutoFocus: true,
+        disableEnforceFocus: true,
+        sx: {
+          pointerEvents: "none",
+          mt: 1
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              p: 1.5,
+              borderRadius: 2,
+              boxShadow: 3
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsxs5(Box4, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx6(Typography3, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
+          userProfile?.email && /* @__PURE__ */ jsx6(Typography3, { variant: "caption", color: "text.secondary", children: userProfile.email })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/i18n/LanguageSelector.tsx
+import { useEffect as useEffect3, useState as useState7 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import {
+  Box as Box5,
+  Typography as Typography4,
+  CircularProgress,
+  IconButton as IconButton4,
+  Menu,
+  MenuItem,
+  Tooltip as Tooltip4
+} from "@mui/material";
+import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation2();
+  const [languages, setLanguages] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = useState7(null);
+  const open = Boolean(anchorEl);
+  useEffect3(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+        if (userSettings.language) changeLanguage(userSettings.language);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    setLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx7(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx7(Tooltip4, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx7(
+      IconButton4,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx7(
+          Box5,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx7(
+      Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ jsxs6(
+            MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  Box5,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation2();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const [anchorEl, setAnchorEl] = useState7(null);
+  const open = Boolean(anchorEl);
+  useEffect3(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx7(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx7(Tooltip4, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx7(
+      IconButton4,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx7(
+          Box5,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx7(
+      Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ jsxs6(
+            MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  Box5,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
@@ -860,11 +1255,16 @@ var UI = {
     UserAvatar: UserAvatarComponent,
     UserPopover: UserPopoverComponent_default,
     UserRoleChip: UserRoleChipComponent,
-    UserStatusChip: UserStatusChipComponent
-  }
+    UserStatusChip: UserStatusChipComponent,
+    MyAvatar: MyAvatarComponent
+  },
   /*Layout: {
     Row: FormRow,
   },*/
+  Widgets: {
+    ProtectedLanguageSelector: LanguageSelector,
+    PublicLanguageSelector
+  }
 };
 export {
   AIProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serhii.olishevskyi/docs",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "DOCS.UA react packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",