@pelatform/ui 1.5.3 → 1.5.4

package/dist/components.cjs

@@ -1906,7 +1906,7 @@ var ImageInput = ({
 
 function LanguageSwitcher({
   className,
-  type = "toggle",
+  type = "dropdown",
   variant = "ghost",
   size = "md",
   showNames = true,
@@ -1932,7 +1932,7 @@ function LanguageSwitcher({
   if (!i18nEnabled && (_nullishCoalesce(_optionalChain([languages, 'optionalAccess', _51 => _51.length]), () => ( 0))) <= 1) {
     return null;
   }
-  if (type === "toggle") {
+  if (type === "dropdown") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHILACSFAcjs.DropdownMenu, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHILACSFAcjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         _chunkBXUKTDPNcjs.Button,
@@ -1951,28 +1951,36 @@ function LanguageSwitcher({
           ]
         }
       ) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHILACSFAcjs.DropdownMenuContent, { align: "end", className: "min-w-[150px]", children: languages.map((lang) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _chunkHILACSFAcjs.DropdownMenuItem,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkHILACSFAcjs.DropdownMenuContent,
         {
-          onClick: () => handleLanguageChange(lang.code),
-          className: _chunkCJXIPSTGcjs.cn.call(void 0, "gap-2", currentLocale === lang.code && "bg-accent"),
-          children: [
-            showFlags && lang.flag ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              Image2,
-              {
-                src: _chunkWI36EFUScjs.getFlagUrl.call(void 0, lang.flag),
-                alt: `${lang.name} flag`,
-                className: "size-4 rounded-full object-cover",
-                width: 24,
-                height: 24
-              }
-            ) : showFlags ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Globe, { className: "size-4" }) : null,
-            showNames && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm", children: lang.name }),
-            currentLocale === lang.code && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkHILACSFAcjs.DropdownMenuItem,
+            {
+              onClick: () => handleLanguageChange(lang.code),
+              className: _chunkCJXIPSTGcjs.cn.call(void 0, "gap-2", currentLocale === lang.code && "bg-accent"),
+              children: [
+                showFlags && lang.flag ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  Image2,
+                  {
+                    src: _chunkWI36EFUScjs.getFlagUrl.call(void 0, lang.flag),
+                    alt: `${lang.name} flag`,
+                    className: "size-4 rounded-full object-cover",
+                    width: 24,
+                    height: 24
+                  }
+                ) : showFlags ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Globe, { className: "size-4" }) : null,
+                showNames && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm", children: lang.name }),
+                currentLocale === lang.code && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ms-auto text-muted-foreground text-xs", children: "\u2713" })
+              ]
+            },
+            lang.code
+          ))
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHILACSFAcjs.DropdownMenuSub, { children: [
@@ -2100,6 +2108,7 @@ function ModeSwitcher({
       _nullishCoalesce(withLabel, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: label.light })))
     ] });
   };
+  const isActive = (val) => theme === val;
   if (type === "toogle") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _chunkBXUKTDPNcjs.Button,
@@ -2116,6 +2125,60 @@ function ModeSwitcher({
       }
     );
   }
+  if (type === "dropdown") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHILACSFAcjs.DropdownMenu, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHILACSFAcjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _chunkBXUKTDPNcjs.Button,
+        {
+          variant,
+          size,
+          className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+            "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__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Toggle theme" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHILACSFAcjs.DropdownMenuContent, { align: "end", onCloseAutoFocus: (e) => e.preventDefault(), children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _chunkHILACSFAcjs.DropdownMenuItem,
+          {
+            className: isActive("light") ? "bg-accent" : "",
+            onClick: () => setTheme("light"),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Sun, {}),
+              label.light
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _chunkHILACSFAcjs.DropdownMenuItem,
+          {
+            className: isActive("dark") ? "bg-accent" : "",
+            onClick: () => setTheme("dark"),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Moon, {}),
+              label.dark
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _chunkHILACSFAcjs.DropdownMenuItem,
+          {
+            className: isActive("system") ? "bg-accent" : "",
+            onClick: () => setTheme("system"),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Monitor, {}),
+              label.system
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkHILACSFAcjs.DropdownMenuItem,
     {

package/dist/components.d.cts

@@ -2226,8 +2226,8 @@ interface LocaleOption {
 interface LanguageSwitcherProps extends SharedImage {
     /** Additional CSS classes */
     className?: string;
-    /** UI type: standalone toggle button or submenu dropdown */
-    type?: 'toggle' | 'dropdown';
+    /** UI type: standalone dropdown or submenu dropdown */
+    type?: 'dropdown' | 'sub-dropdown';
     /** Button variant style (for toggle type) */
     variant?: 'ghost' | 'outline' | 'secondary';
     /** Button size (for toggle type) */
@@ -2308,8 +2308,8 @@ interface ModeSwitcherProps {
     size?: 'sm' | 'md' | 'lg';
     /** Custom cycle order for themes (defaults to system -> light -> dark) */
     cycleOrder?: ThemeMode[];
-    /** Button type: 'toggle' for a single button or 'dropdown' for a menu with options */
-    type?: 'toogle' | 'dropdown';
+    /** Button type: 'toggle' for a single button or 'dropdown' and 'sub-dropdown' for a menu with options */
+    type?: 'toogle' | 'dropdown' | 'sub-dropdown';
     /** Labels for each theme mode (optional) */
     label?: {
         system?: string;

package/dist/components.d.ts

@@ -2226,8 +2226,8 @@ interface LocaleOption {
 interface LanguageSwitcherProps extends SharedImage {
     /** Additional CSS classes */
     className?: string;
-    /** UI type: standalone toggle button or submenu dropdown */
-    type?: 'toggle' | 'dropdown';
+    /** UI type: standalone dropdown or submenu dropdown */
+    type?: 'dropdown' | 'sub-dropdown';
     /** Button variant style (for toggle type) */
     variant?: 'ghost' | 'outline' | 'secondary';
     /** Button size (for toggle type) */
@@ -2308,8 +2308,8 @@ interface ModeSwitcherProps {
     size?: 'sm' | 'md' | 'lg';
     /** Custom cycle order for themes (defaults to system -> light -> dark) */
     cycleOrder?: ThemeMode[];
-    /** Button type: 'toggle' for a single button or 'dropdown' for a menu with options */
-    type?: 'toogle' | 'dropdown';
+    /** Button type: 'toggle' for a single button or 'dropdown' and 'sub-dropdown' for a menu with options */
+    type?: 'toogle' | 'dropdown' | 'sub-dropdown';
     /** Labels for each theme mode (optional) */
     label?: {
         system?: string;

package/dist/components.js

@@ -1906,7 +1906,7 @@ import { Globe, Languages } from "lucide-react";
 import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 function LanguageSwitcher({
   className,
-  type = "toggle",
+  type = "dropdown",
   variant = "ghost",
   size = "md",
   showNames = true,
@@ -1932,7 +1932,7 @@ function LanguageSwitcher({
   if (!i18nEnabled && (languages?.length ?? 0) <= 1) {
     return null;
   }
-  if (type === "toggle") {
+  if (type === "dropdown") {
     return /* @__PURE__ */ jsxs23(DropdownMenu, { children: [
       /* @__PURE__ */ jsx34(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
         Button,
@@ -1951,28 +1951,36 @@ function LanguageSwitcher({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx34(DropdownMenuContent, { align: "end", className: "min-w-[150px]", children: languages.map((lang) => /* @__PURE__ */ jsxs23(
-        DropdownMenuItem,
+      /* @__PURE__ */ jsx34(
+        DropdownMenuContent,
         {
-          onClick: () => handleLanguageChange(lang.code),
-          className: cn("gap-2", currentLocale === lang.code && "bg-accent"),
-          children: [
-            showFlags && lang.flag ? /* @__PURE__ */ jsx34(
-              Image2,
-              {
-                src: getFlagUrl(lang.flag),
-                alt: `${lang.name} flag`,
-                className: "size-4 rounded-full object-cover",
-                width: 24,
-                height: 24
-              }
-            ) : showFlags ? /* @__PURE__ */ jsx34(Globe, { className: "size-4" }) : null,
-            showNames && /* @__PURE__ */ jsx34("span", { className: "text-sm", children: lang.name }),
-            currentLocale === lang.code && /* @__PURE__ */ jsx34("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(
+            DropdownMenuItem,
+            {
+              onClick: () => handleLanguageChange(lang.code),
+              className: cn("gap-2", currentLocale === lang.code && "bg-accent"),
+              children: [
+                showFlags && lang.flag ? /* @__PURE__ */ jsx34(
+                  Image2,
+                  {
+                    src: getFlagUrl(lang.flag),
+                    alt: `${lang.name} flag`,
+                    className: "size-4 rounded-full object-cover",
+                    width: 24,
+                    height: 24
+                  }
+                ) : showFlags ? /* @__PURE__ */ jsx34(Globe, { className: "size-4" }) : null,
+                showNames && /* @__PURE__ */ jsx34("span", { className: "text-sm", children: lang.name }),
+                currentLocale === lang.code && /* @__PURE__ */ jsx34("span", { className: "ms-auto text-muted-foreground text-xs", children: "\u2713" })
+              ]
+            },
+            lang.code
+          ))
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs23(DropdownMenuSub, { children: [
@@ -2100,6 +2108,7 @@ function ModeSwitcher({
       withLabel ?? /* @__PURE__ */ jsx36("span", { children: label.light })
     ] });
   };
+  const isActive = (val) => theme === val;
   if (type === "toogle") {
     return /* @__PURE__ */ jsxs24(
       Button,
@@ -2116,6 +2125,60 @@ function ModeSwitcher({
       }
     );
   }
+  if (type === "dropdown") {
+    return /* @__PURE__ */ jsxs24(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx36(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
+        Button,
+        {
+          variant,
+          size,
+          className: cn(
+            "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__ */ jsx36("span", { className: "sr-only", children: "Toggle theme" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs24(DropdownMenuContent, { align: "end", onCloseAutoFocus: (e) => e.preventDefault(), children: [
+        /* @__PURE__ */ jsxs24(
+          DropdownMenuItem,
+          {
+            className: isActive("light") ? "bg-accent" : "",
+            onClick: () => setTheme("light"),
+            children: [
+              /* @__PURE__ */ jsx36(Sun, {}),
+              label.light
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs24(
+          DropdownMenuItem,
+          {
+            className: isActive("dark") ? "bg-accent" : "",
+            onClick: () => setTheme("dark"),
+            children: [
+              /* @__PURE__ */ jsx36(Moon, {}),
+              label.dark
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs24(
+          DropdownMenuItem,
+          {
+            className: isActive("system") ? "bg-accent" : "",
+            onClick: () => setTheme("system"),
+            children: [
+              /* @__PURE__ */ jsx36(Monitor, {}),
+              label.system
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsx36(
     DropdownMenuItem,
     {