@algenium/blocks 1.0.1 → 1.1.0-rc.2

package/dist/index.d.cts

@@ -118,10 +118,16 @@ type ThemeSwitcherProps = {
     align?: "start" | "center" | "end";
     /** Dropdown side (for mini variant) */
     side?: "top" | "bottom" | "left" | "right";
+    /** Tooltip position relative to the mini trigger (mini variant only) */
+    tooltipSide?: "top" | "right" | "bottom" | "left";
+    /** Tooltip alignment (mini variant only) */
+    tooltipAlign?: "start" | "center" | "end";
+    /** Tooltip offset from the trigger in px (mini variant only) */
+    tooltipSideOffset?: number;
     /** Translation labels - consumers can pass their own t() values */
     labels?: ThemeSwitcherLabels;
 };
-declare function ThemeSwitcher({ className, size, shape, variant, align, side, labels: userLabels, }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitcher({ className, size, shape, variant, align, side, tooltipSide, tooltipAlign, tooltipSideOffset, labels: userLabels, }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
 
 type Language = {
     /** Language key/code (e.g., "en", "es") */
@@ -171,8 +177,14 @@ type LanguageSwitcherProps = {
     align?: "start" | "center" | "end";
     /** Dropdown side */
     side?: "top" | "bottom" | "left" | "right";
+    /** Tooltip position relative to the mini trigger (mini variant only) */
+    tooltipSide?: "top" | "right" | "bottom" | "left";
+    /** Tooltip alignment (mini variant only) */
+    tooltipAlign?: "start" | "center" | "end";
+    /** Tooltip offset from the trigger in px (mini variant only) */
+    tooltipSideOffset?: number;
 };
-declare function LanguageSwitcher({ languages: propLanguages, currentLanguage: propCurrentLanguage, onLanguageChange: propOnLanguageChange, labels, className, size, shape, variant, showIcon, align, side, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
+declare function LanguageSwitcher({ languages: propLanguages, currentLanguage: propCurrentLanguage, onLanguageChange: propOnLanguageChange, labels, className, size, shape, variant, showIcon, align, side, tooltipSide, tooltipAlign, tooltipSideOffset, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
 
 interface AvatarEditorProps {
     /** Current cropped image as data URL (controlled) */

package/dist/index.d.ts

@@ -118,10 +118,16 @@ type ThemeSwitcherProps = {
     align?: "start" | "center" | "end";
     /** Dropdown side (for mini variant) */
     side?: "top" | "bottom" | "left" | "right";
+    /** Tooltip position relative to the mini trigger (mini variant only) */
+    tooltipSide?: "top" | "right" | "bottom" | "left";
+    /** Tooltip alignment (mini variant only) */
+    tooltipAlign?: "start" | "center" | "end";
+    /** Tooltip offset from the trigger in px (mini variant only) */
+    tooltipSideOffset?: number;
     /** Translation labels - consumers can pass their own t() values */
     labels?: ThemeSwitcherLabels;
 };
-declare function ThemeSwitcher({ className, size, shape, variant, align, side, labels: userLabels, }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitcher({ className, size, shape, variant, align, side, tooltipSide, tooltipAlign, tooltipSideOffset, labels: userLabels, }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
 
 type Language = {
     /** Language key/code (e.g., "en", "es") */
@@ -171,8 +177,14 @@ type LanguageSwitcherProps = {
     align?: "start" | "center" | "end";
     /** Dropdown side */
     side?: "top" | "bottom" | "left" | "right";
+    /** Tooltip position relative to the mini trigger (mini variant only) */
+    tooltipSide?: "top" | "right" | "bottom" | "left";
+    /** Tooltip alignment (mini variant only) */
+    tooltipAlign?: "start" | "center" | "end";
+    /** Tooltip offset from the trigger in px (mini variant only) */
+    tooltipSideOffset?: number;
 };
-declare function LanguageSwitcher({ languages: propLanguages, currentLanguage: propCurrentLanguage, onLanguageChange: propOnLanguageChange, labels, className, size, shape, variant, showIcon, align, side, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
+declare function LanguageSwitcher({ languages: propLanguages, currentLanguage: propCurrentLanguage, onLanguageChange: propOnLanguageChange, labels, className, size, shape, variant, showIcon, align, side, tooltipSide, tooltipAlign, tooltipSideOffset, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
 
 interface AvatarEditorProps {
     /** Current cropped image as data URL (controlled) */

package/dist/index.js

@@ -3440,6 +3440,9 @@ function ThemeSwitcher({
   variant = "default",
   align = "center",
   side = "top",
+  tooltipSide = "bottom",
+  tooltipAlign = "center",
+  tooltipSideOffset = 8,
   labels: userLabels
 }) {
   const { theme, setTheme } = useTheme();
@@ -3484,7 +3487,15 @@ function ThemeSwitcher({
             children: /* @__PURE__ */ jsx(CurrentIcon, { className: sizes.iconMini })
           }
         ) }) }),
-        /* @__PURE__ */ jsx(TooltipContent, { side: "right", sideOffset: 8, children: labels.theme })
+        /* @__PURE__ */ jsx(
+          TooltipContent,
+          {
+            side: tooltipSide,
+            align: tooltipAlign,
+            sideOffset: tooltipSideOffset,
+            children: labels.theme
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx(DropdownMenuContent, { side, align, sideOffset: 8, children: themes.map(({ key, icon: Icon }) => /* @__PURE__ */ jsxs(
         DropdownMenuItem,
@@ -3595,7 +3606,10 @@ function LanguageSwitcher({
   variant = "default",
   showIcon = true,
   align = "center",
-  side = "top"
+  side = "top",
+  tooltipSide = "bottom",
+  tooltipAlign = "center",
+  tooltipSideOffset = 8
 }) {
   const context = useLanguageContext();
   const contextLanguages = context?.languages?.map((lang) => ({
@@ -3623,7 +3637,15 @@ function LanguageSwitcher({
             children: /* @__PURE__ */ jsx(Languages, { className: sizes.iconMini })
           }
         ) }) }),
-        /* @__PURE__ */ jsx(TooltipContent, { side: "right", sideOffset: 8, children: defaultLabels2.language })
+        /* @__PURE__ */ jsx(
+          TooltipContent,
+          {
+            side: tooltipSide,
+            align: tooltipAlign,
+            sideOffset: tooltipSideOffset,
+            children: defaultLabels2.language
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx(
         DropdownMenuContent,
@@ -4569,6 +4591,7 @@ function AvatarEditorDialog({
   const [isSaving, setIsSaving] = useState(false);
   const [feedback, setFeedback] = useState(null);
   const isMobile = useMediaQuery("(max-width: 640px)");
+  const caption = (placeholder ?? "").trim();
   const handleOpenChange = useCallback(
     (open) => {
       if (open) {
@@ -4628,10 +4651,25 @@ function AvatarEditorDialog({
                 alt: "Avatar",
                 className: "w-full h-full object-cover"
               }
-            ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-muted-foreground gap-1", children: [
-              /* @__PURE__ */ jsx(User, { className: "w-1/3 h-1/3" }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs", children: placeholder })
-            ] })
+            ) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center justify-center text-muted-foreground",
+                  caption ? "gap-1" : "gap-0"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    User,
+                    {
+                      className: "h-1/2 w-1/2 max-h-[55%] max-w-[55%] shrink-0",
+                      "aria-hidden": true
+                    }
+                  ),
+                  caption ? /* @__PURE__ */ jsx("span", { className: "text-xs text-center px-1", children: caption }) : null
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx(
@@ -4728,7 +4766,7 @@ function AvatarEditorDialog({
     /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
       /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialogTitle }) }),
       /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: EditorContent }),
-      /* @__PURE__ */ jsx(DialogFooter, { className: "gap-2 sm:gap-0", children: FooterButtons })
+      /* @__PURE__ */ jsx(DialogFooter, { className: "sm:gap-3", children: FooterButtons })
     ] }) })
   ] });
 }