@sesionario/blocks 1.7.0 → 1.9.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React6 from 'react';
-import { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useId, 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, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, User, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, Settings, PictureInPicture2, Minimize, Maximize, BadgeCheck, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, XIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -425,6 +425,68 @@ function ConfirmDestructiveDialog({
     ] })
   ] }) });
 }
+var COLLAPSED_MAX_HEIGHT_REM = 11;
+function ExpandableText({
+  children,
+  expandLabel,
+  collapseLabel,
+  className,
+  textClassName
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [overflowing, setOverflowing] = useState(false);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    setExpanded(false);
+  }, [children]);
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const measure = () => {
+      const rootFontSize = Number.parseFloat(
+        getComputedStyle(document.documentElement).fontSize
+      );
+      const maxPx = COLLAPSED_MAX_HEIGHT_REM * (rootFontSize || 16);
+      setOverflowing(el.scrollHeight > maxPx + 1);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [children]);
+  const collapsed = !expanded && overflowing;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          collapsed && "max-h-[11rem] overflow-hidden scroll-fade-b"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "p",
+          {
+            ref: contentRef,
+            className: cn(
+              "whitespace-pre-wrap text-sm leading-relaxed",
+              textClassName
+            ),
+            children
+          }
+        )
+      }
+    ),
+    overflowing ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "text-sm font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-sm",
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((prev) => !prev),
+        children: expanded ? collapseLabel : expandLabel
+      }
+    ) : null
+  ] });
+}
 var MIN_SCALE = 1;
 var MAX_SCALE = 4;
 var DOUBLE_TAP_MS = 300;
@@ -1318,7 +1380,7 @@ function LanguageSwitcher({
   const sizes = sizeClasses2[size];
   const shapeClass = shapeClasses2[shape];
   const reduceMotion = useReducedMotion();
-  const defaultLabels4 = {
+  const defaultLabels5 = {
     language: labels.language ?? "Language"
   };
   if (variant === "mini") {
@@ -1328,7 +1390,7 @@ function LanguageSwitcher({
         {
           variant: "ghost",
           size: "icon",
-          "aria-label": defaultLabels4.language,
+          "aria-label": defaultLabels5.language,
           className: cn(sizes.buttonMini, shapeClass, className),
           children: /* @__PURE__ */ jsx(Languages, { className: sizes.iconMini })
         }
@@ -4255,6 +4317,18 @@ function useDebouncedValueStrict(value, delayMs) {
   }, [value, delayMs]);
   return debounced;
 }
+function useMediaQuery2(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
 function useSearchHotkey(options = {}) {
   const { defaultOpen = false, disabled = false } = options;
   const [open, setOpen] = useState(defaultOpen);
@@ -4272,6 +4346,22 @@ function useSearchHotkey(options = {}) {
   }, [disabled]);
   return { open, setOpen, toggle };
 }
+
+// src/components/search/fuzzy.ts
+function normalize(value) {
+  return value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}
+function fuzzyMatch(query, target) {
+  const q = normalize(query.trim());
+  if (!q) return true;
+  const t = normalize(target);
+  if (t.includes(q)) return true;
+  let qi = 0;
+  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+    if (t[ti] === q[qi]) qi++;
+  }
+  return qi === q.length;
+}
 function Command({
   className,
   ...props
@@ -4389,6 +4479,19 @@ function CommandGroup({
     }
   );
 }
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("-mx-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
 function CommandItem({
   className,
   ...props
@@ -4405,23 +4508,584 @@ function CommandItem({
     }
   );
 }
-
-// src/components/search/fuzzy.ts
-function normalize(value) {
-  return value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+function OptionRow({
+  entry,
+  selected,
+  onSelect,
+  renderOption
+}) {
+  return /* @__PURE__ */ jsxs(
+    CommandItem,
+    {
+      value: entry.value,
+      keywords: [entry.label],
+      onSelect,
+      "data-checked": selected || void 0,
+      children: [
+        renderOption ? renderOption(entry.item, { selected }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.label }),
+        /* @__PURE__ */ jsx(
+          CheckIcon,
+          {
+            className: cn(
+              "ml-auto size-4 shrink-0",
+              selected ? "opacity-100" : "opacity-0"
+            )
+          }
+        )
+      ]
+    },
+    entry.value
+  );
 }
-function fuzzyMatch(query, target) {
-  const q = normalize(query.trim());
-  if (!q) return true;
-  const t = normalize(target);
-  if (t.includes(q)) return true;
-  let qi = 0;
-  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
-    if (t[ti] === q[qi]) qi++;
-  }
-  return qi === q.length;
+function SearchablePickerList({
+  query,
+  onQueryChange,
+  labels,
+  isLoading,
+  hasError,
+  recommended,
+  recent,
+  results,
+  selectedValues,
+  mode,
+  allowEmpty,
+  emptyLabel,
+  onSelectEmpty,
+  onSelectItem,
+  renderOption,
+  createOption,
+  onLoadMore,
+  hasMore,
+  isLoadingMore,
+  listClassName
+}) {
+  const hasPinned = recommended.length > 0 || recent.length > 0;
+  const hasResults = results.length > 0;
+  const showEmpty = !isLoading && !hasError && !hasPinned && !hasResults && !(allowEmpty && mode === "single");
+  return /* @__PURE__ */ jsxs(Command, { shouldFilter: false, className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsx(
+      CommandInput,
+      {
+        placeholder: labels.searchPlaceholder,
+        value: query,
+        onValueChange: onQueryChange
+      }
+    ),
+    /* @__PURE__ */ jsxs(CommandList, { className: cn("min-h-0 flex-1", listClassName), children: [
+      isLoading ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground",
+          role: "status",
+          children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }),
+            labels.loading
+          ]
+        }
+      ) : null,
+      hasError && !isLoading ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "py-6 text-center text-sm text-destructive",
+          role: "alert",
+          children: labels.error
+        }
+      ) : null,
+      showEmpty ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : null,
+      allowEmpty && mode === "single" && !query.trim() ? /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(
+        CommandItem,
+        {
+          value: "__empty__",
+          onSelect: () => onSelectEmpty?.(),
+          "data-checked": !selectedValues.size || void 0,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: emptyLabel }),
+            /* @__PURE__ */ jsx(
+              CheckIcon,
+              {
+                className: cn(
+                  "ml-auto size-4 shrink-0",
+                  selectedValues.size === 0 ? "opacity-100" : "opacity-0"
+                )
+              }
+            )
+          ]
+        }
+      ) }) : null,
+      recommended.length > 0 ? /* @__PURE__ */ jsx(CommandGroup, { heading: labels.recommended, children: recommended.map((entry) => /* @__PURE__ */ jsx(
+        OptionRow,
+        {
+          entry,
+          selected: selectedValues.has(entry.value),
+          onSelect: () => onSelectItem(entry.value),
+          renderOption
+        },
+        `rec-${entry.value}`
+      )) }) : null,
+      recent.length > 0 ? /* @__PURE__ */ jsx(CommandGroup, { heading: labels.recent, children: recent.map((entry) => /* @__PURE__ */ jsx(
+        OptionRow,
+        {
+          entry,
+          selected: selectedValues.has(entry.value),
+          onSelect: () => onSelectItem(entry.value),
+          renderOption
+        },
+        `recent-${entry.value}`
+      )) }) : null,
+      hasPinned && hasResults ? /* @__PURE__ */ jsx(CommandSeparator, {}) : null,
+      hasResults ? /* @__PURE__ */ jsx(CommandGroup, { heading: hasPinned ? labels.results : void 0, children: results.map((entry) => /* @__PURE__ */ jsx(
+        OptionRow,
+        {
+          entry,
+          selected: selectedValues.has(entry.value),
+          onSelect: () => onSelectItem(entry.value),
+          renderOption
+        },
+        `res-${entry.value}`
+      )) }) : null,
+      hasMore && onLoadMore ? /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "w-full",
+          disabled: isLoadingMore,
+          onClick: () => void onLoadMore(),
+          children: isLoadingMore ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }),
+            labels.loading
+          ] }) : labels.loadMore
+        }
+      ) }) : null,
+      createOption ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CommandSeparator, {}),
+        /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(
+          CommandItem,
+          {
+            value: "__create__",
+            onSelect: () => createOption.onSelect(),
+            children: createOption.label
+          }
+        ) })
+      ] }) : null
+    ] })
+  ] });
 }
 var defaultLabels3 = {
+  placeholder: "Seleccionar\u2026",
+  searchPlaceholder: "Buscar\u2026",
+  empty: "No se encontraron resultados",
+  loading: "Cargando\u2026",
+  error: "No se pudo cargar la lista",
+  recommended: "Recomendados",
+  recent: "Recientes",
+  results: "Resultados",
+  done: "Listo",
+  cancel: "Cancelar",
+  clear: "Limpiar",
+  selectedCount: (count) => count === 1 ? "1 seleccionado" : `${count} seleccionados`,
+  emptyOption: "Ninguno",
+  loadMore: "Cargar m\xE1s",
+  dialogTitle: "Seleccionar"
+};
+function toListItems(items, getOptionValue, getOptionLabel) {
+  if (!items?.length) return [];
+  return items.map((item) => ({
+    item,
+    value: getOptionValue(item),
+    label: getOptionLabel(item)
+  }));
+}
+function dedupeByValue(items, exclude = /* @__PURE__ */ new Set()) {
+  const seen = new Set(exclude);
+  const out = [];
+  for (const entry of items) {
+    if (seen.has(entry.value)) continue;
+    seen.add(entry.value);
+    out.push(entry);
+  }
+  return out;
+}
+function matchesQuery(entry, query, getOptionKeywords) {
+  if (!query.trim()) return true;
+  if (fuzzyMatch(query, entry.label)) return true;
+  return getOptionKeywords?.(entry.item)?.some(
+    (keyword) => fuzzyMatch(query, keyword)
+  ) ?? false;
+}
+function SearchablePicker(props) {
+  const {
+    options,
+    fetchOptions,
+    getOptionValue,
+    getOptionLabel,
+    getOptionKeywords,
+    renderOption,
+    renderValue,
+    pinned,
+    labels: userLabels,
+    minQueryLength = 0,
+    debounceMs = 200,
+    disabled,
+    open: openProp,
+    onOpenChange,
+    clearable,
+    allowEmpty,
+    emptyLabel,
+    keepOpenOnSelect,
+    maxSelected,
+    createOption,
+    onLoadMore,
+    hasMore,
+    className,
+    triggerClassName: triggerClassName2,
+    id,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel
+  } = props;
+  const mode = props.mode ?? "single";
+  const labels = { ...defaultLabels3, ...userLabels };
+  const resolvedEmptyLabel = emptyLabel ?? labels.emptyOption;
+  const isMobile = useMediaQuery2("(max-width: 767px)");
+  const generatedId = useId();
+  const triggerId = id ?? generatedId;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      onOpenChange?.(next);
+      if (openProp === void 0) setUncontrolledOpen(next);
+    },
+    [onOpenChange, openProp]
+  );
+  const [query, setQuery] = useState("");
+  const [remoteItems, setRemoteItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const debouncedQuery = useDebouncedValue(query, debounceMs);
+  const requestIdRef = useRef(0);
+  const knownItemsRef = useRef(/* @__PURE__ */ new Map());
+  const rememberItems = useCallback(
+    (items) => {
+      for (const item of items) {
+        knownItemsRef.current.set(getOptionValue(item), item);
+      }
+    },
+    [getOptionValue]
+  );
+  useEffect(() => {
+    if (options) rememberItems(options);
+    if (pinned?.recommended) rememberItems(pinned.recommended);
+    if (pinned?.recent) rememberItems(pinned.recent);
+  }, [options, pinned, rememberItems]);
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setRemoteItems([]);
+      setHasError(false);
+      setIsLoading(false);
+    }
+  }, [open]);
+  const trimmedDebounced = debouncedQuery.trim();
+  const shouldFetch = Boolean(fetchOptions) && open && trimmedDebounced.length >= minQueryLength && (trimmedDebounced.length > 0 || !options);
+  useEffect(() => {
+    if (!shouldFetch || !fetchOptions) {
+      if (!trimmedDebounced) {
+        setRemoteItems([]);
+        setHasError(false);
+        setIsLoading(false);
+      }
+      return;
+    }
+    const requestId = ++requestIdRef.current;
+    setIsLoading(true);
+    setHasError(false);
+    fetchOptions(trimmedDebounced).then((result) => {
+      if (requestIdRef.current !== requestId) return;
+      setRemoteItems(result);
+      rememberItems(result);
+    }).catch(() => {
+      if (requestIdRef.current !== requestId) return;
+      setRemoteItems([]);
+      setHasError(true);
+    }).finally(() => {
+      if (requestIdRef.current !== requestId) return;
+      setIsLoading(false);
+    });
+  }, [shouldFetch, fetchOptions, trimmedDebounced, rememberItems]);
+  const selectedValues = useMemo(() => {
+    if (mode === "multiple") {
+      const multiValue = props.value ?? [];
+      return new Set(multiValue);
+    }
+    const singleValue = props.value;
+    return singleValue ? /* @__PURE__ */ new Set([singleValue]) : /* @__PURE__ */ new Set();
+  }, [mode, props]);
+  const selectedValueKey = mode === "multiple" ? (props.value ?? []).join("\0") : props.value ?? "";
+  const selectedItems = useMemo(() => {
+    const values = mode === "multiple" ? selectedValueKey ? selectedValueKey.split("\0") : [] : selectedValueKey ? [selectedValueKey] : [];
+    return values.map((value) => knownItemsRef.current.get(value)).filter((item) => item !== void 0);
+  }, [mode, selectedValueKey, options, pinned, remoteItems]);
+  const queryForFilter = query.trim();
+  const recommended = useMemo(() => {
+    if (queryForFilter) return [];
+    const pinnedValues = /* @__PURE__ */ new Set();
+    const items = dedupeByValue(
+      toListItems(pinned?.recommended, getOptionValue, getOptionLabel)
+    );
+    for (const entry of items) pinnedValues.add(entry.value);
+    return items;
+  }, [queryForFilter, pinned?.recommended, getOptionValue, getOptionLabel]);
+  const recent = useMemo(() => {
+    if (queryForFilter) return [];
+    const exclude = new Set(recommended.map((e) => e.value));
+    return dedupeByValue(
+      toListItems(pinned?.recent, getOptionValue, getOptionLabel),
+      exclude
+    );
+  }, [
+    queryForFilter,
+    pinned?.recent,
+    recommended,
+    getOptionValue,
+    getOptionLabel
+  ]);
+  const pinnedValueSet = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const entry of recommended) set.add(entry.value);
+    for (const entry of recent) set.add(entry.value);
+    return set;
+  }, [recommended, recent]);
+  const results = useMemo(() => {
+    const usingRemote = Boolean(fetchOptions) && trimmedDebounced.length >= minQueryLength && (trimmedDebounced.length > 0 || !options);
+    if (usingRemote) {
+      return dedupeByValue(
+        toListItems(remoteItems, getOptionValue, getOptionLabel),
+        queryForFilter ? /* @__PURE__ */ new Set() : pinnedValueSet
+      );
+    }
+    const staticItems = toListItems(options, getOptionValue, getOptionLabel);
+    const filtered = staticItems.filter(
+      (entry) => matchesQuery(entry, queryForFilter, getOptionKeywords)
+    );
+    return dedupeByValue(filtered, queryForFilter ? /* @__PURE__ */ new Set() : pinnedValueSet);
+  }, [
+    fetchOptions,
+    trimmedDebounced,
+    minQueryLength,
+    options,
+    remoteItems,
+    getOptionValue,
+    getOptionLabel,
+    getOptionKeywords,
+    queryForFilter,
+    pinnedValueSet
+  ]);
+  const closeOnSelect = keepOpenOnSelect !== void 0 ? !keepOpenOnSelect : mode === "single";
+  const handleSelectEmpty = useCallback(() => {
+    if (mode === "single") {
+      props.onValueChange?.(
+        null
+      );
+    }
+    if (closeOnSelect) setOpen(false);
+  }, [mode, props, closeOnSelect, setOpen]);
+  const handleSelectItem = useCallback(
+    (value) => {
+      if (mode === "multiple") {
+        const current = props.value ?? [];
+        const onChange = props.onValueChange;
+        const exists = current.includes(value);
+        if (exists) {
+          onChange?.(current.filter((v) => v !== value));
+        } else if (maxSelected !== void 0 && current.length >= maxSelected) {
+          return;
+        } else {
+          onChange?.([...current, value]);
+        }
+        if (closeOnSelect) setOpen(false);
+        return;
+      }
+      props.onValueChange?.(
+        value
+      );
+      if (closeOnSelect) setOpen(false);
+    },
+    [mode, props, maxSelected, closeOnSelect, setOpen]
+  );
+  const handleClear = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (mode === "multiple") {
+        props.onValueChange?.(
+          []
+        );
+      } else {
+        props.onValueChange?.(null);
+      }
+    },
+    [mode, props]
+  );
+  const handleLoadMore = useCallback(async () => {
+    if (!onLoadMore || isLoadingMore) return;
+    setIsLoadingMore(true);
+    try {
+      await onLoadMore();
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [onLoadMore, isLoadingMore]);
+  const triggerLabel = useMemo(() => {
+    if (renderValue) {
+      if (mode === "multiple") {
+        return renderValue(selectedItems);
+      }
+      return renderValue(selectedItems[0] ?? null);
+    }
+    if (mode === "multiple") {
+      const count = selectedValues.size;
+      if (count === 0) {
+        return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: labels.placeholder });
+      }
+      if (selectedItems.length === 1) {
+        return getOptionLabel(selectedItems[0]);
+      }
+      return labels.selectedCount(count);
+    }
+    if (selectedValues.size === 0) {
+      return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: allowEmpty ? resolvedEmptyLabel : labels.placeholder });
+    }
+    if (selectedItems[0]) {
+      return getOptionLabel(selectedItems[0]);
+    }
+    const only = [...selectedValues][0];
+    return only ?? labels.placeholder;
+  }, [
+    renderValue,
+    mode,
+    selectedItems,
+    selectedValues,
+    labels,
+    getOptionLabel,
+    allowEmpty,
+    resolvedEmptyLabel
+  ]);
+  const showClear = clearable && !disabled && (mode === "multiple" ? selectedValues.size > 0 : selectedValues.size > 0);
+  const list = /* @__PURE__ */ jsx(
+    SearchablePickerList,
+    {
+      query,
+      onQueryChange: setQuery,
+      labels,
+      isLoading,
+      hasError,
+      recommended,
+      recent,
+      results,
+      selectedValues,
+      mode,
+      allowEmpty,
+      emptyLabel: resolvedEmptyLabel,
+      onSelectEmpty: handleSelectEmpty,
+      onSelectItem: handleSelectItem,
+      renderOption,
+      createOption,
+      onLoadMore: onLoadMore ? handleLoadMore : void 0,
+      hasMore,
+      isLoadingMore,
+      listClassName: isMobile ? "max-h-[min(50vh,360px)]" : "max-h-72"
+    }
+  );
+  const triggerButton = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      role: "combobox",
+      id: triggerId,
+      "aria-expanded": open,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel ?? labels.placeholder,
+      disabled,
+      className: cn("w-full justify-between font-normal", triggerClassName2),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: triggerLabel }),
+        /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50", "aria-hidden": true })
+      ]
+    }
+  );
+  const clearButton = showClear ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon-sm",
+      "aria-label": labels.clear,
+      disabled,
+      className: "shrink-0",
+      onClick: handleClear,
+      children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+    }
+  ) : null;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full items-center gap-1", className), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "min-w-0 flex-1",
+          onClick: () => {
+            if (!disabled) setOpen(true);
+          },
+          children: triggerButton
+        }
+      ),
+      clearButton,
+      /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DrawerContent, { className: "max-h-[90vh]", children: [
+        /* @__PURE__ */ jsx(DrawerHeader, { className: "text-left", children: /* @__PURE__ */ jsx(DrawerTitle, { children: labels.dialogTitle }) }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden px-2 pb-2", children: list }),
+        mode === "multiple" ? /* @__PURE__ */ jsxs(DrawerFooter, { className: "flex-row gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "flex-1",
+              onClick: () => setOpen(false),
+              children: labels.cancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              className: "flex-1",
+              onClick: () => setOpen(false),
+              children: labels.done
+            }
+          )
+        ] }) : null
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: triggerButton }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: "w-[var(--radix-popover-trigger-width)] min-w-[240px] p-0",
+          align: "start",
+          children: list
+        }
+      )
+    ] }) }),
+    clearButton
+  ] });
+}
+var defaultLabels4 = {
   placeholder: "Buscar en toda la plataforma\u2026",
   dialogTitle: "Buscar",
   dialogDescription: "Busca funcionalidades, eventos, documentos y m\xE1s",
@@ -4455,7 +5119,7 @@ function SearchCommand({
   debounceMs = 200,
   className
 }) {
-  const labels = { ...defaultLabels3, ...userLabels };
+  const labels = { ...defaultLabels4, ...userLabels };
   const [query, setQuery] = useState("");
   const [hits, setHits] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -5336,18 +6000,6 @@ function ChatMessageList({
     /* @__PURE__ */ jsx(MessageScrollerButton, {})
   ] }) });
 }
-function useMediaQuery2(query) {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mql = window.matchMedia(query);
-    const onChange = () => setMatches(mql.matches);
-    onChange();
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [query]);
-  return matches;
-}
 var RECONNECT_DELAY_MS = 2e3;
 function useSupportConversation({
   client,
@@ -5966,6 +6618,6 @@ function createSupportChatClient(basePath = "/api/chat-svc") {
   };
 }
 
-export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map