@algenium/blocks 1.7.0 → 1.9.0

package/dist/index.js

@@ -1,18 +1,18 @@
 import * as React2 from 'react';
 import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo, useId } from 'react';
+import { Loader2, AlertTriangle, Inbox, CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, FlaskConical, X, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, XIcon, User, Pencil, Check, Bell, CheckCheck, XCircle, CheckCircle, Info, Trash2, Clock, MapPin, Link, CalendarDays, ExternalLink, ChevronLeft, ChevronRight, Plus, HelpCircle, MessageSquare, Wifi, WifiOff, FileIcon, Download, Paperclip, Send, ArrowLeft, CreditCard, Search, CheckCircle2 } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useTheme } from 'next-themes';
-import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, FlaskConical, X, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, XIcon, User, Pencil, Check, Loader2, Bell, CheckCheck, XCircle, AlertTriangle, CheckCircle, Info, Trash2, Clock, MapPin, Link, CalendarDays, ExternalLink, ChevronLeft, ChevronRight, Plus, HelpCircle, MessageSquare, Wifi, WifiOff, FileIcon, Download, Paperclip, Send, ArrowLeft, CreditCard, Search, CheckCircle2 } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { startOfMonth, endOfMonth, eachDayOfInterval, endOfWeek, startOfWeek, format, isSameDay, subMonths, addMonths } from 'date-fns';
 import { DayPicker } from 'react-day-picker';
 import valid from 'card-validator';
@@ -3084,6 +3084,93 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function LoadingState({
+  label = "Cargando\u2026",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: cn(
+        "flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+function ErrorState({
+  title = "Algo sali\xF3 mal",
+  description,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: cn(
+        "flex flex-col items-center gap-3 rounded-xl border border-dashed border-destructive/40 bg-destructive/5 py-12 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "size-6 text-destructive", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+        ] }),
+        action
+      ]
+    }
+  );
+}
+function EmptyState({
+  title,
+  description,
+  action,
+  icon: Icon = Inbox,
+  variant = "default",
+  className
+}) {
+  const isCompact = variant === "compact";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center gap-3 text-center",
+        isCompact ? "px-4 py-6" : "rounded-xl border border-dashed py-12",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: cn(
+              "text-muted-foreground",
+              isCompact ? "size-8 opacity-50" : "size-6"
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("font-medium", isCompact && "text-sm"), children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+        ] }),
+        action
+      ]
+    }
+  );
+}
+var miniMenuContentClassName = "max-h-none overflow-x-visible overflow-y-visible";
+var miniMenuContentDefaults = {
+  sideOffset: 8,
+  collisionPadding: 12
+};
 function DropdownMenu({
   ...props
 }) {
@@ -3382,52 +3469,6 @@ function Button({
     }
   );
 }
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TooltipPrimitive.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-    TooltipPrimitive.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
 var defaultLabels = {
   theme: "Theme",
   system: "System",
@@ -3471,11 +3512,8 @@ function ThemeSwitcher({
   size = "sm",
   shape = "rounded",
   variant = "default",
-  align = "center",
-  side = "top",
-  tooltipSide = "bottom",
-  tooltipAlign = "center",
-  tooltipSideOffset = 8,
+  align = "end",
+  side = "bottom",
   labels: userLabels
 }) {
   const { theme, setTheme } = useTheme();
@@ -3509,43 +3547,42 @@ function ThemeSwitcher({
   const CurrentIcon = themes.find((t) => t.key === currentTheme)?.icon || Monitor;
   if (variant === "mini") {
     return /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
-      /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            "data-testid": "theme-switcher",
-            variant: "ghost",
-            size: "icon",
-            "aria-label": labels.theme,
-            className: cn(sizes.buttonMini, shapeClass, className),
-            children: /* @__PURE__ */ jsx(CurrentIcon, { className: sizes.iconMini })
-          }
-        ) }) }),
-        /* @__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,
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
         {
-          onClick: () => handleThemeClick(key),
-          className: cn(
-            "gap-2 cursor-pointer",
-            currentTheme === key && "bg-accent text-accent-foreground [&_svg]:text-accent-foreground"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { children: labels[key] })
-          ]
-        },
-        key
-      )) })
+          "data-testid": "theme-switcher",
+          variant: "ghost",
+          size: "icon",
+          "aria-label": labels.theme,
+          className: cn(sizes.buttonMini, shapeClass, className),
+          children: /* @__PURE__ */ jsx(CurrentIcon, { className: sizes.iconMini })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        DropdownMenuContent,
+        {
+          side,
+          align,
+          sideOffset: miniMenuContentDefaults.sideOffset,
+          collisionPadding: miniMenuContentDefaults.collisionPadding,
+          className: miniMenuContentClassName,
+          children: themes.map(({ key, icon: Icon }) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: () => handleThemeClick(key),
+              className: cn(
+                "gap-2 cursor-pointer",
+                currentTheme === key && "bg-accent text-accent-foreground [&_svg]:text-accent-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { children: labels[key] })
+              ]
+            },
+            key
+          ))
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsx(
@@ -3639,11 +3676,8 @@ function LanguageSwitcher({
   shape = "rounded",
   variant = "default",
   showIcon = true,
-  align = "center",
-  side = "top",
-  tooltipSide = "bottom",
-  tooltipAlign = "center",
-  tooltipSideOffset = 8
+  align = "end",
+  side = "bottom"
 }) {
   const context = useLanguageContext();
   const contextLanguages = context?.languages?.map((lang) => ({
@@ -3661,34 +3695,24 @@ function LanguageSwitcher({
   };
   if (variant === "mini") {
     return /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
-      /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            "aria-label": defaultLabels4.language,
-            className: cn(sizes.buttonMini, shapeClass, className),
-            children: /* @__PURE__ */ jsx(Languages, { className: sizes.iconMini })
-          }
-        ) }) }),
-        /* @__PURE__ */ jsx(
-          TooltipContent,
-          {
-            side: tooltipSide,
-            align: tooltipAlign,
-            sideOffset: tooltipSideOffset,
-            children: defaultLabels4.language
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": defaultLabels4.language,
+          className: cn(sizes.buttonMini, shapeClass, className),
+          children: /* @__PURE__ */ jsx(Languages, { className: sizes.iconMini })
+        }
+      ) }),
       /* @__PURE__ */ jsx(
         DropdownMenuContent,
         {
           side,
           align,
-          sideOffset: 8,
-          className: "min-w-0 w-auto",
+          sideOffset: miniMenuContentDefaults.sideOffset,
+          collisionPadding: miniMenuContentDefaults.collisionPadding,
+          className: cn(miniMenuContentClassName, "min-w-0 w-auto"),
           children: languages.map(({ key, nativeName }) => /* @__PURE__ */ jsx(
             DropdownMenuItem,
             {
@@ -3888,10 +3912,7 @@ function EnvironmentSwitcher({
   shape = "rounded",
   variant = "mini",
   align = "end",
-  side = "bottom",
-  tooltipSide = "bottom",
-  tooltipAlign = "center",
-  tooltipSideOffset = 8
+  side = "bottom"
 }) {
   const ctx = useEnvironmentContext();
   const labels = { ...defaultLabels2, ...userLabels };
@@ -3907,53 +3928,18 @@ function EnvironmentSwitcher({
   };
   if (variant === "mini") {
     return /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
-      /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            "data-testid": "environment-switcher",
-            variant: "outline",
-            size: "sm",
-            "aria-label": labels.environment,
-            className: cn(
-              sizes.buttonMini,
-              shapeClass,
-              "font-medium tabular-nums border-border bg-background",
-              className
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "rounded-full shrink-0 ring-1 ring-background",
-                    sizes.dot,
-                    getEnvironmentDotClass(environment)
-                  ),
-                  "aria-hidden": true
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "max-w-[5.5rem] truncate", children: getEnvironmentLabel(environment, labels) })
-            ]
-          }
-        ) }) }),
-        /* @__PURE__ */ jsx(
-          TooltipContent,
-          {
-            side: tooltipSide,
-            align: tooltipAlign,
-            sideOffset: tooltipSideOffset,
-            children: labels.environment
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(DropdownMenuContent, { side, align, sideOffset: 8, children: environments.map((env) => /* @__PURE__ */ jsxs(
-        DropdownMenuItem,
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
         {
-          onClick: () => handleSelect(env),
+          "data-testid": "environment-switcher",
+          variant: "outline",
+          size: "sm",
+          "aria-label": labels.environment,
           className: cn(
-            "gap-2 cursor-pointer",
-            environment === env && "bg-accent text-accent-foreground [&_svg]:text-accent-foreground"
+            sizes.buttonMini,
+            shapeClass,
+            "font-medium tabular-nums border-border bg-background",
+            className
           ),
           children: [
             /* @__PURE__ */ jsx(
@@ -3962,16 +3948,50 @@ function EnvironmentSwitcher({
                 className: cn(
                   "rounded-full shrink-0 ring-1 ring-background",
                   sizes.dot,
-                  getEnvironmentDotClass(env)
+                  getEnvironmentDotClass(environment)
                 ),
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ jsx("span", { children: getEnvironmentLabel(env, labels) })
+            /* @__PURE__ */ jsx("span", { className: "max-w-[5.5rem] truncate", children: getEnvironmentLabel(environment, labels) })
           ]
-        },
-        env
-      )) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        DropdownMenuContent,
+        {
+          side,
+          align,
+          sideOffset: miniMenuContentDefaults.sideOffset,
+          collisionPadding: miniMenuContentDefaults.collisionPadding,
+          className: miniMenuContentClassName,
+          children: environments.map((env) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: () => handleSelect(env),
+              className: cn(
+                "gap-2 cursor-pointer",
+                environment === env && "bg-accent text-accent-foreground [&_svg]:text-accent-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "rounded-full shrink-0 ring-1 ring-background",
+                      sizes.dot,
+                      getEnvironmentDotClass(env)
+                    ),
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: getEnvironmentLabel(env, labels) })
+              ]
+            },
+            env
+          ))
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs(
@@ -5829,6 +5849,52 @@ function UpcomingEvents({
     );
   }) });
 }
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
 function CalendarSubscribeButton({
   feedUrl,
   label
@@ -8101,6 +8167,6 @@ function USAddressInput({
   ] });
 }
 
-export { AvatarEditor, AvatarEditorDialog, BLOCKS_DATA_ENVIRONMENTS, Button, CalendarContext, CalendarSubscribeButton, CalendarView, CalendarWidget, CardInput, ChatRoomView, ChatSidebar, ChatSidebarContext, ChatSidebarProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EnvironmentBanner, EnvironmentContext, EnvironmentDot, EnvironmentMiniBadge, EnvironmentSwitcher, EventDialog, EventRsvpBadge, LanguageContext, LanguageSwitcher, MiniCalendar, NotificationsContext, NotificationsWidget, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, USAddressInput, UpcomingEvents, buttonVariants, cn, defaultLanguages, getEnvironmentDotClass, getEnvironmentLabel, isBlocksDataEnvironment, toggleVariants, useCalendarContext, useChatRoom, useChatSidebar, useDebouncedValue, useDebouncedValueStrict, useEnvironmentContext, useLanguageContext, useNotificationsContext };
+export { AvatarEditor, AvatarEditorDialog, BLOCKS_DATA_ENVIRONMENTS, Button, CalendarContext, CalendarSubscribeButton, CalendarView, CalendarWidget, CardInput, ChatRoomView, ChatSidebar, ChatSidebarContext, ChatSidebarProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EnvironmentBanner, EnvironmentContext, EnvironmentDot, EnvironmentMiniBadge, EnvironmentSwitcher, ErrorState, EventDialog, EventRsvpBadge, LanguageContext, LanguageSwitcher, LoadingState, MiniCalendar, NotificationsContext, NotificationsWidget, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, USAddressInput, UpcomingEvents, buttonVariants, cn, defaultLanguages, getEnvironmentDotClass, getEnvironmentLabel, isBlocksDataEnvironment, toggleVariants, useCalendarContext, useChatRoom, useChatSidebar, useDebouncedValue, useDebouncedValueStrict, useEnvironmentContext, useLanguageContext, useNotificationsContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map