@sesionario/blocks 1.20.0 → 1.22.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React7 from 'react';
-import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo, useId } from 'react';
+import { createContext, forwardRef, useContext, useState, useRef, useId, useEffect, useCallback, useLayoutEffect, useMemo } from 'react';
 import { ChevronsUpDown, CheckIcon, Smile, SearchIcon, Search, Clock, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Loader2, AlertTriangle, Inbox, X, ChevronLeft, ChevronRight, Monitor, Sun, Moon, Building2, Check, Plus, Languages, BadgeCheck, Settings, User, Activity, LogOut, LogIn, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, PictureInPicture2, Minimize, Maximize, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, ChevronUp, ChevronDown, XIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -425,6 +425,348 @@ function ConfirmDestructiveDialog({
     ] })
   ] }) });
 }
+
+// src/components/editable/types.ts
+var DEFAULT_EDITABLE_SECTION_LABELS = {
+  edit: "Editar",
+  save: "Guardar",
+  saving: "Guardando\u2026",
+  cancel: "Cancelar",
+  saved: "Guardado",
+  discardTitle: "\xBFDescartar cambios?",
+  discardDescription: "Si sales ahora, se perder\xE1n los cambios que no hayas guardado.",
+  discardConfirm: "Descartar",
+  discardCancel: "Seguir editando"
+};
+
+// src/components/editable/useEditableSection.ts
+function focusFirstField(container) {
+  if (!container) return;
+  const target = container.querySelector(
+    "[data-autofocus], input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable='true']"
+  );
+  target?.focus();
+}
+function useEditableSection({
+  onSave,
+  onDiscard,
+  isDirty = false,
+  labelledBy,
+  title,
+  labels,
+  stableHeight = false
+}) {
+  const resolvedLabels = {
+    ...DEFAULT_EDITABLE_SECTION_LABELS,
+    ...labels
+  };
+  const [mode, setMode] = useState("reading");
+  const [status, setStatus] = useState(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [minHeightPx, setMinHeightPx] = useState(void 0);
+  const contentRef = useRef(null);
+  const editButtonRef = useRef(null);
+  const measuredHeightRef = useRef(0);
+  const shouldFocusEditRef = useRef(false);
+  const shouldFocusFirstFieldRef = useRef(false);
+  const editButtonId = useId();
+  const contentFormId = useId();
+  const isEditing = mode === "editing" || mode === "saving";
+  const isSaving = mode === "saving";
+  useEffect(() => {
+    if (mode === "reading" && shouldFocusEditRef.current) {
+      shouldFocusEditRef.current = false;
+      editButtonRef.current?.focus();
+      return;
+    }
+    if (mode === "editing" && shouldFocusFirstFieldRef.current) {
+      shouldFocusFirstFieldRef.current = false;
+      const invalid = contentRef.current?.querySelector(
+        "[aria-invalid='true']"
+      );
+      if (invalid) {
+        invalid.focus();
+        return;
+      }
+      focusFirstField(contentRef.current);
+    }
+  }, [mode]);
+  const exitToReading = useCallback(() => {
+    setConfirmOpen(false);
+    shouldFocusEditRef.current = true;
+    setMode("reading");
+    onDiscard?.();
+  }, [onDiscard]);
+  const startEdit = useCallback(() => {
+    setStatus(null);
+    shouldFocusFirstFieldRef.current = true;
+    setMode("editing");
+  }, []);
+  const requestCancel = useCallback(() => {
+    if (isSaving) return;
+    if (isDirty) {
+      setConfirmOpen(true);
+      return;
+    }
+    exitToReading();
+  }, [exitToReading, isDirty, isSaving]);
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (isSaving) return;
+      void (async () => {
+        setMode("saving");
+        setStatus(null);
+        try {
+          await onSave();
+          setStatus(resolvedLabels.saved);
+          shouldFocusEditRef.current = true;
+          setMode("reading");
+        } catch {
+          shouldFocusFirstFieldRef.current = true;
+          setMode("editing");
+        }
+      })();
+    },
+    [isSaving, onSave, resolvedLabels.saved]
+  );
+  const handleFormKeyDown = useCallback(
+    (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      requestCancel();
+    },
+    [requestCancel]
+  );
+  useEffect(() => {
+    if (!stableHeight || !isEditing) return;
+    const el = contentRef.current;
+    if (!el) return;
+    const measure = () => {
+      const height = el.getBoundingClientRect().height;
+      if (height > measuredHeightRef.current) {
+        measuredHeightRef.current = height;
+        setMinHeightPx(height);
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isEditing, stableHeight]);
+  const editButtonNameProps = labelledBy != null ? { "aria-labelledby": `${labelledBy} ${editButtonId}` } : title != null && title.length > 0 ? { "aria-label": `${resolvedLabels.edit} ${title}` } : { "aria-label": resolvedLabels.edit };
+  return {
+    mode,
+    isEditing,
+    isSaving,
+    startEdit,
+    requestCancel,
+    formProps: {
+      onSubmit: handleSubmit,
+      onKeyDown: handleFormKeyDown,
+      noValidate: true
+    },
+    contentRef,
+    editButtonRef,
+    contentFormId,
+    editButtonProps: {
+      type: "button",
+      id: editButtonId,
+      onClick: startEdit,
+      ref: editButtonRef,
+      ...editButtonNameProps
+    },
+    saveButtonProps: {
+      type: "submit",
+      disabled: isSaving
+    },
+    cancelButtonProps: {
+      type: "button",
+      onClick: requestCancel,
+      disabled: isSaving
+    },
+    status,
+    statusProps: {
+      role: "status",
+      "aria-live": "polite",
+      className: "sr-only"
+    },
+    confirmDiscard: {
+      open: confirmOpen,
+      onOpenChange: setConfirmOpen,
+      title: resolvedLabels.discardTitle,
+      description: resolvedLabels.discardDescription,
+      confirmLabel: resolvedLabels.discardConfirm,
+      cancelLabel: resolvedLabels.discardCancel,
+      onConfirm: exitToReading
+    },
+    resolvedLabels,
+    contentStyle: stableHeight && minHeightPx != null ? { minHeight: minHeightPx } : void 0,
+    actionsClassName: "flex min-h-9 min-w-[11rem] flex-wrap items-center justify-end gap-2"
+  };
+}
+function EditableSection({
+  readView,
+  editView,
+  children,
+  className,
+  ...options
+}) {
+  const section = useEditableSection(options);
+  const {
+    isEditing,
+    isSaving,
+    formProps,
+    contentRef,
+    contentFormId,
+    editButtonProps,
+    saveButtonProps,
+    cancelButtonProps,
+    status,
+    statusProps,
+    confirmDiscard,
+    resolvedLabels,
+    contentStyle,
+    actionsClassName,
+    mode
+  } = section;
+  const actionButtons = !isEditing ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", ...editButtonProps, children: resolvedLabels.edit }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", ...cancelButtonProps, children: resolvedLabels.cancel }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        type: "submit",
+        form: contentFormId,
+        disabled: saveButtonProps.disabled,
+        children: isSaving ? resolvedLabels.saving : resolvedLabels.save
+      }
+    )
+  ] });
+  const actions = /* @__PURE__ */ jsx("div", { "data-slot": "editable-section-actions", className: actionsClassName, children: actionButtons });
+  const content = isEditing ? /* @__PURE__ */ jsx(
+    "form",
+    {
+      id: contentFormId,
+      ref: contentRef,
+      "data-slot": "editable-section-content",
+      className: cn("sesionario-editable-section-content space-y-4"),
+      style: contentStyle,
+      ...formProps,
+      children: editView()
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      "data-slot": "editable-section-content",
+      className: "sesionario-editable-section-content",
+      style: contentStyle,
+      children: readView()
+    }
+  );
+  const statusNode = /* @__PURE__ */ jsx("span", { ...statusProps, "data-slot": "editable-section-status", children: status });
+  const dialog = /* @__PURE__ */ jsx(
+    ConfirmDestructiveDialog,
+    {
+      open: confirmDiscard.open,
+      onOpenChange: confirmDiscard.onOpenChange,
+      title: confirmDiscard.title,
+      description: confirmDiscard.description,
+      confirmLabel: confirmDiscard.confirmLabel,
+      cancelLabel: confirmDiscard.cancelLabel,
+      onConfirm: confirmDiscard.onConfirm
+    }
+  );
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children({
+        actions,
+        content,
+        status: statusNode,
+        mode,
+        isSaving,
+        isEditing
+      }),
+      dialog
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editable-section", className: cn("space-y-4", className), children: [
+    actions,
+    content,
+    statusNode,
+    dialog
+  ] });
+}
+function DataList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-slot": "data-list",
+      className: cn("grid gap-4 sm:grid-cols-2", className),
+      ...props
+    }
+  );
+}
+function DataListItem({
+  label,
+  children,
+  empty = "\u2014",
+  className,
+  labelClassName,
+  valueClassName
+}) {
+  const isEmpty = children == null || children === false || typeof children === "string" && children.trim().length === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "data-list-item",
+      className: cn("flex flex-col gap-1.5", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "dt",
+          {
+            className: cn(
+              "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              labelClassName
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            className: cn(
+              "text-sm wrap-break-word",
+              isEmpty && "text-muted-foreground",
+              valueClassName
+            ),
+            children: isEmpty ? empty : children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldMessage({
+  id,
+  children,
+  className,
+  ...props
+}) {
+  const hasMessage = children != null && children !== false && !(typeof children === "string" && children.trim().length === 0);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      id,
+      role: hasMessage ? "alert" : void 0,
+      "data-slot": "field-message",
+      className: cn("min-h-5 text-xs text-destructive", className),
+      ...props,
+      children: hasMessage ? children : "\xA0"
+    }
+  );
+}
 var COLLAPSED_MAX_HEIGHT_REM = 11;
 function ExpandableText({
   children,
@@ -1313,13 +1655,13 @@ function TenantAvatar({
   logo,
   size = "md"
 }) {
-  const sizeClass = size === "sm" ? "size-6 rounded-md" : "size-8 rounded-lg";
+  const sizeClass = size === "sm" ? "size-6" : "size-8";
   const textClass = size === "sm" ? "text-xs" : "text-sm";
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "flex shrink-0 items-center justify-center overflow-hidden font-medium",
+        "flex shrink-0 items-center justify-center overflow-hidden rounded-full font-medium",
         sizeClass
       ),
       style: logo ? void 0 : avatarFallbackStyle(name),
@@ -1340,7 +1682,7 @@ function SwitcherSkeleton({
           "pointer-events-none flex size-8 items-center justify-center rounded-md",
           className
         ),
-        children: /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-lg bg-muted" })
+        children: /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-full bg-muted" })
       }
     );
   }
@@ -1353,7 +1695,7 @@ function SwitcherSkeleton({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-lg bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-full bg-muted" }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
           /* @__PURE__ */ jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-muted" }),
           /* @__PURE__ */ jsx("div", { className: "h-3 w-16 animate-pulse rounded bg-muted" })
@@ -1396,7 +1738,7 @@ function OrgSwitcher({
             triggerClassNameProp
           ),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsx(Building2, { className: "size-4 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(Building2, { className: "size-4 text-muted-foreground" }) }),
             !collapsed ? /* @__PURE__ */ jsx("div", { className: "grid min-w-0 flex-1 text-left leading-tight", children: /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: labels.empty }) }) : null
           ]
         }
@@ -1413,7 +1755,7 @@ function OrgSwitcher({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsx(Building2, { className: "size-4 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(Building2, { className: "size-4 text-muted-foreground" }) }),
           !collapsed ? /* @__PURE__ */ jsx("div", { className: "grid min-w-0 flex-1 text-left leading-tight", children: /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-muted-foreground", children: labels.empty }) }) : null
         ]
       }
@@ -2299,8 +2641,6 @@ function AvatarEditor({
     canvas.width = displaySize;
     canvas.height = displaySize;
     ctx.clearRect(0, 0, displaySize, displaySize);
-    ctx.fillStyle = "#1a1a2e";
-    ctx.fillRect(0, 0, displaySize, displaySize);
     ctx.save();
     ctx.translate(displaySize / 2, displaySize / 2);
     ctx.rotate(rotation * Math.PI / 180);
@@ -2322,28 +2662,6 @@ function AvatarEditor({
       drawHeight
     );
     ctx.restore();
-    ctx.globalCompositeOperation = "destination-in";
-    ctx.beginPath();
-    ctx.arc(
-      displaySize / 2,
-      displaySize / 2,
-      displaySize / 2 - 4,
-      0,
-      Math.PI * 2
-    );
-    ctx.fill();
-    ctx.globalCompositeOperation = "source-over";
-    ctx.strokeStyle = "hsl(var(--primary))";
-    ctx.lineWidth = 3;
-    ctx.beginPath();
-    ctx.arc(
-      displaySize / 2,
-      displaySize / 2,
-      displaySize / 2 - 2,
-      0,
-      Math.PI * 2
-    );
-    ctx.stroke();
     const dataUrl = generateOutput();
     if (dataUrl) {
       onChange?.(dataUrl);
@@ -2449,6 +2767,8 @@ function AvatarEditor({
   const gapSize = isLarge ? "gap-6" : "gap-4";
   const controlGap = isLarge ? "gap-3" : "gap-2";
   const sliderHeight = isLarge ? "[&_[role=slider]]:h-6 [&_[role=slider]]:w-6" : "";
+  const guideRadius = size / 2 - 2;
+  const guideCenter = size / 2;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2512,6 +2832,36 @@ function AvatarEditor({
                   onTouchEnd: handleMouseUp
                 }
               ),
+              imageLoaded && /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: size,
+                  height: size,
+                  className: "pointer-events-none absolute inset-0",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: `M0 0H${size}V${size}H0Z M${guideCenter - guideRadius} ${guideCenter}a${guideRadius} ${guideRadius} 0 1 0 ${guideRadius * 2} 0a${guideRadius} ${guideRadius} 0 1 0 ${-guideRadius * 2} 0`,
+                        fill: "rgb(0 0 0 / 0.45)",
+                        fillRule: "evenodd"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: guideCenter,
+                        cy: guideCenter,
+                        r: guideRadius,
+                        fill: "none",
+                        stroke: "hsl(var(--primary))",
+                        strokeWidth: "3"
+                      }
+                    )
+                  ]
+                }
+              ),
               showGrid && imageLoaded && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -6959,6 +7309,32 @@ function PaymentIcon({
     }
   );
 }
+var BrandX = forwardRef(function BrandX2({
+  className,
+  size = 24,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}, ref) {
+  const labelled = Boolean(ariaLabel || ariaLabelledby);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      ...props,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-hidden": labelled ? void 0 : true,
+      width: size,
+      height: size,
+      className: cn("shrink-0", className),
+      children: /* @__PURE__ */ jsx("path", { d: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" })
+    }
+  );
+});
 function MessageGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -8289,6 +8665,6 @@ function useRealtimeChannel({
   }, [enabled, reconnectDelayMs]);
 }
 
-export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DropdownMenuItem, DropdownMenuSeparator, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, FeedVideoPlayer, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PaymentIcon, PhoneInput, PlatformAccountMenu, PlatformNavbar, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, BrandX, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, DropdownMenuItem, DropdownMenuSeparator, EditableSection, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, FeedVideoPlayer, FieldMessage, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PaymentIcon, PhoneInput, PlatformAccountMenu, PlatformNavbar, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map