@sesionario/blocks 1.1.1 → 1.3.0

package/README.md

@@ -4,6 +4,8 @@ Shared UI components for [Sesionario](https://github.com/Docufacil) applications
 
 This package is the Sesionario-specific successor to `@algenium/blocks`. It ships only the components, hooks, and data the five Sesionario apps (`admin`, `app`, `auth`, `backoffice`, `pharma`) actually use, plus shadcn `Empty` primitives under the hood of `EmptyState`.
 
+Shared feedback patterns include `ConfirmDestructiveDialog` (confirm before delete/mute and similar irreversible actions).
+
 ## Install
 
 ```bash

package/dist/index.cjs

@@ -7,10 +7,11 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+var reactSlot = require('@radix-ui/react-slot');
 var nextThemes = require('next-themes');
 var framerMotion = require('framer-motion');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var reactSlot = require('@radix-ui/react-slot');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -43,6 +44,7 @@ function _interopNamespace(e) {
 }
 
 var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
@@ -242,6 +244,217 @@ function EmptyState({
     }
   );
 }
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:text-foreground dark:hover:bg-muted dark:hover:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 dark:hover:text-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function AlertDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AlertDialogPrimitive__namespace.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        "data-size": size,
+        className: cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn(
+        "flex flex-col gap-1.5 text-center sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-semibold", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Action,
+    {
+      "data-slot": "alert-dialog-action",
+      className: cn(className),
+      ...props
+    }
+  ) });
+}
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Cancel,
+    {
+      "data-slot": "alert-dialog-cancel",
+      className: cn(className),
+      ...props
+    }
+  ) });
+}
+function ConfirmDestructiveDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Eliminar",
+  cancelLabel = "Cancelar",
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { size: "sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { children: cancelLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AlertDialogAction,
+        {
+          variant: "destructive",
+          onClick: () => {
+            onConfirm();
+            onOpenChange(false);
+          },
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] }) });
+}
 var miniMenuContentClassName = "max-h-none overflow-x-visible overflow-y-visible";
 var miniMenuContentDefaults = {
   sideOffset: 8,
@@ -348,52 +561,6 @@ function DropdownMenuShortcut({
     }
   );
 }
-var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:text-foreground dark:hover:bg-muted dark:hover:text-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 dark:hover:text-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? reactSlot.Slot : "button";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
 var defaultLabels = {
   theme: "Theme",
   system: "System",
@@ -443,6 +610,7 @@ function ThemeSwitcher({
 }) {
   const { theme, setTheme } = nextThemes.useTheme();
   const [mounted, setMounted] = React5.useState(false);
+  const reduceMotion = framerMotion.useReducedMotion();
   const sizes = sizeClasses[size];
   const shapeClass = shapeClasses[shape];
   const labels = { ...defaultLabels, ...userLabels };
@@ -526,11 +694,17 @@ function ThemeSwitcher({
           "button",
           {
             "aria-label": labels[key],
+            "aria-pressed": isActive,
             className: cn("relative", sizes.button, shapeClass),
             onClick: () => handleThemeClick(key),
             type: "button",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
+              reduceMotion ? isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("absolute inset-0 bg-secondary", shapeClass)
+                }
+              ) : null : /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.div,
                 {
                   className: cn("absolute inset-0 bg-secondary", shapeClass),
@@ -559,6 +733,88 @@ function ThemeSwitcher({
     }
   );
 }
+
+// src/lib/avatar.ts
+var EMPTY_COLORS = {
+  backgroundColor: "#9ca3af",
+  color: "#111111"
+};
+var AVATAR_PALETTE = [
+  "#4f6d8c",
+  // slate blue
+  "#3d7a6a",
+  // teal
+  "#6b5b8a",
+  // muted purple
+  "#8a5a4a",
+  // warm brown
+  "#4a7a8a",
+  // steel cyan
+  "#7a6b4a",
+  // olive
+  "#5a6b8a",
+  // periwinkle
+  "#8a4a5a",
+  // rose
+  "#4a8a6b",
+  // green
+  "#6b4a7a",
+  // plum
+  "#8a6b4a",
+  // amber brown
+  "#4a5a8a",
+  // indigo
+  "#7a4a6b",
+  // mauve
+  "#5a8a4a",
+  // leaf
+  "#8a5a7a",
+  // dusty pink
+  "#3d6b7a"
+  // deep teal
+];
+function hashString(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function srgbToLinear(channel) {
+  const c = channel / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance(hex) {
+  const normalized = hex.replace("#", "");
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
+}
+function contrastingTextColor(backgroundHex) {
+  return relativeLuminance(backgroundHex) > 0.179 ? "#111111" : "#ffffff";
+}
+function getInitials(name, max = 2) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const letters = parts.slice(0, Math.max(1, max)).map((part) => part.charAt(0)).join("");
+  return letters.toUpperCase() || "?";
+}
+function getAvatarColors(name) {
+  const normalized = name.trim().toLowerCase();
+  if (!normalized) {
+    return { ...EMPTY_COLORS };
+  }
+  const backgroundColor = AVATAR_PALETTE[hashString(normalized) % AVATAR_PALETTE.length];
+  return {
+    backgroundColor,
+    color: contrastingTextColor(backgroundColor)
+  };
+}
+function avatarFallbackStyle(name) {
+  return getAvatarColors(name);
+}
 var defaultLabels2 = {
   heading: "Organizations",
   create: "Create organization",
@@ -575,10 +831,11 @@ function TenantAvatar({
     "div",
     {
       className: cn(
-        "flex shrink-0 items-center justify-center overflow-hidden bg-muted font-medium text-muted-foreground",
+        "flex shrink-0 items-center justify-center overflow-hidden font-medium",
         sizeClass
       ),
-      children: logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClass, children: name.charAt(0).toUpperCase() })
+      style: logo ? void 0 : avatarFallbackStyle(name),
+      children: logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClass, children: getInitials(name) })
     }
   );
 }
@@ -795,6 +1052,7 @@ function LanguageSwitcher({
   const onLanguageChange = propOnLanguageChange ?? context?.setLanguage;
   const sizes = sizeClasses2[size];
   const shapeClass = shapeClasses2[shape];
+  const reduceMotion = framerMotion.useReducedMotion();
   const defaultLabels4 = {
     language: labels.language ?? "Language"
   };
@@ -856,11 +1114,17 @@ function LanguageSwitcher({
             "button",
             {
               "aria-label": label,
+              "aria-pressed": isActive,
               className: cn("relative font-semibold", sizes.button, shapeClass),
               onClick: () => onLanguageChange?.(key),
               type: "button",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                reduceMotion ? isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn("absolute inset-0 bg-secondary", shapeClass)
+                  }
+                ) : null : /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
                   framerMotion.motion.div,
                   {
                     className: cn("absolute inset-0 bg-secondary", shapeClass),
@@ -4198,7 +4462,7 @@ function VerifiedProfessionalBadge({
   showLabel = false,
   className
 }) {
-  if (status === "unverified") {
+  if (status === "unverified" || status === "pending_review" && !showLabel) {
     return null;
   }
   const label = LABELS[status];
@@ -4567,9 +4831,6 @@ function MessageScrollerButton({
     }
   );
 }
-function initials(name) {
-  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
-}
 function ChatMessageList({
   messages,
   currentUserId,
@@ -4591,7 +4852,14 @@ function ChatMessageList({
         "Mensaje eliminado \xB7 ",
         m.senderName
       ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(Message, { align, children: [
-        !mine ? /* @__PURE__ */ jsxRuntime.jsx(MessageAvatar, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground", children: initials(m.senderName) }) }) : null,
+        !mine ? /* @__PURE__ */ jsxRuntime.jsx(MessageAvatar, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "flex size-8 items-center justify-center rounded-full text-xs font-medium",
+            style: avatarFallbackStyle(m.senderName),
+            children: getInitials(m.senderName)
+          }
+        ) }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { children: [
           !mine ? /* @__PURE__ */ jsxRuntime.jsx(MessageHeader, { children: m.senderName }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4629,6 +4897,7 @@ exports.BubbleContent = BubbleContent;
 exports.BubbleGroup = BubbleGroup;
 exports.BubbleReactions = BubbleReactions;
 exports.ChatMessageList = ChatMessageList;
+exports.ConfirmDestructiveDialog = ConfirmDestructiveDialog;
 exports.EmojiPicker = EmojiPicker;
 exports.EmojiPickerPopover = EmojiPickerPopover;
 exports.Empty = Empty;
@@ -4666,6 +4935,7 @@ exports.SearchCommand = SearchCommand;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.VerifiedProfessionalBadge = VerifiedProfessionalBadge;
 exports.VideoPlayer = VideoPlayer;
+exports.avatarFallbackStyle = avatarFallbackStyle;
 exports.bubbleVariants = bubbleVariants;
 exports.cn = cn;
 exports.createLiveHlsConfig = createLiveHlsConfig;
@@ -4673,6 +4943,8 @@ exports.createVodHlsConfig = createVodHlsConfig;
 exports.defaultLanguages = defaultLanguages;
 exports.describePlaybackError = describePlaybackError;
 exports.fuzzyMatch = fuzzyMatch;
+exports.getAvatarColors = getAvatarColors;
+exports.getInitials = getInitials;
 exports.markerVariants = markerVariants;
 exports.normalizeEmojiQuery = normalizeEmojiQuery;
 exports.shouldRetryLiveEdge404 = shouldRetryLiveEdge404;