@sesionario/blocks 1.1.1 → 1.2.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),
@@ -795,6 +969,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 +1031,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),
@@ -4629,6 +4810,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;