@algenium/blocks 1.14.1 → 1.15.0

package/dist/index.cjs

@@ -17,6 +17,7 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
+var cmdk = require('cmdk');
 var valid = require('card-validator');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -3902,7 +3903,7 @@ function LanguageSwitcher({
   const onLanguageChange = propOnLanguageChange ?? context?.setLanguage;
   const sizes = sizeClasses2[size];
   const shapeClass = shapeClasses2[shape];
-  const defaultLabels5 = {
+  const defaultLabels6 = {
     language: labels.language ?? "Language"
   };
   if (variant === "mini") {
@@ -3912,7 +3913,7 @@ function LanguageSwitcher({
         {
           variant: "ghost",
           size: "icon",
-          "aria-label": defaultLabels5.language,
+          "aria-label": defaultLabels6.language,
           className: cn(sizes.buttonMini, shapeClass, className),
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: sizes.iconMini })
         }
@@ -9192,6 +9193,342 @@ function useDebouncedValueStrict(value, delayMs) {
   }, [value, delayMs]);
   return debounced;
 }
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command,
+    {
+      "data-slot": "command",
+      className: cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  commandProps,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogContent,
+      {
+        className: cn("overflow-hidden p-0", className),
+        showCloseButton,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Command,
+          {
+            className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+            ...commandProps,
+            children
+          }
+        )
+      }
+    )
+  ] });
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          cmdk.Command.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("-mx-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// 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;
+}
+var defaultLabels5 = {
+  placeholder: "Buscar en toda la plataforma\u2026",
+  dialogTitle: "Buscar",
+  dialogDescription: "Busca funcionalidades, eventos, documentos y m\xE1s",
+  loading: "Buscando\u2026",
+  empty: "No se encontraron resultados",
+  error: "No se pudo completar la b\xFAsqueda",
+  featuresGroup: "Funcionalidades",
+  defaultResultsGroup: "Resultados"
+};
+function groupHitsByType(hits) {
+  const order = [];
+  const byType = /* @__PURE__ */ new Map();
+  for (const hit of hits) {
+    if (!byType.has(hit.type)) {
+      byType.set(hit.type, []);
+      order.push(hit.type);
+    }
+    byType.get(hit.type)?.push(hit);
+  }
+  return order.map((type) => [type, byType.get(type) ?? []]);
+}
+function SearchCommand({
+  open,
+  onOpenChange,
+  fetchResults,
+  onSelect,
+  features = [],
+  typeLabels,
+  labels: userLabels,
+  minQueryLength = 2,
+  debounceMs = 200,
+  className
+}) {
+  const labels = { ...defaultLabels5, ...userLabels };
+  const [query, setQuery] = React7.useState("");
+  const [hits, setHits] = React7.useState([]);
+  const [isLoading, setIsLoading] = React7.useState(false);
+  const [hasError, setHasError] = React7.useState(false);
+  const debouncedQuery = useDebouncedValue(query, debounceMs);
+  const requestIdRef = React7.useRef(0);
+  React7.useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setHits([]);
+      setHasError(false);
+    }
+  }, [open]);
+  React7.useEffect(() => {
+    const trimmed = debouncedQuery.trim();
+    if (trimmed.length < minQueryLength) {
+      setHits([]);
+      setHasError(false);
+      setIsLoading(false);
+      return;
+    }
+    const requestId = ++requestIdRef.current;
+    setIsLoading(true);
+    setHasError(false);
+    fetchResults(trimmed).then((result) => {
+      if (requestIdRef.current !== requestId) return;
+      setHits(result);
+    }).catch(() => {
+      if (requestIdRef.current !== requestId) return;
+      setHits([]);
+      setHasError(true);
+    }).finally(() => {
+      if (requestIdRef.current !== requestId) return;
+      setIsLoading(false);
+    });
+  }, [debouncedQuery, minQueryLength, fetchResults]);
+  const filteredFeatures = React7.useMemo(() => {
+    if (!query.trim()) return features;
+    return features.filter(
+      (feature) => fuzzyMatch(query, feature.label) || feature.keywords?.some((keyword) => fuzzyMatch(query, keyword))
+    );
+  }, [features, query]);
+  const groupedHits = React7.useMemo(() => groupHitsByType(hits), [hits]);
+  function handleSelect(selection) {
+    onSelect(selection);
+    onOpenChange(false);
+  }
+  const hasAnyResults = filteredFeatures.length > 0 || hits.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    CommandDialog,
+    {
+      open,
+      onOpenChange,
+      title: labels.dialogTitle,
+      description: labels.dialogDescription,
+      className,
+      commandProps: { shouldFilter: false },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CommandInput,
+          {
+            placeholder: labels.placeholder,
+            value: query,
+            onValueChange: setQuery
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: labels.loading }) : null,
+          hasError && !isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-destructive", children: labels.error }) : null,
+          !isLoading && !hasError && !hasAnyResults ? /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: labels.empty }) : null,
+          filteredFeatures.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { heading: labels.featuresGroup, children: filteredFeatures.map((feature) => /* @__PURE__ */ jsxRuntime.jsxs(
+            CommandItem,
+            {
+              value: feature.id,
+              onSelect: () => handleSelect({ kind: "feature", feature }),
+              children: [
+                feature.icon,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.label })
+              ]
+            },
+            feature.id
+          )) }) : null,
+          !isLoading && groupedHits.map(([type, typeHits]) => /* @__PURE__ */ jsxRuntime.jsx(
+            CommandGroup,
+            {
+              heading: typeLabels?.[type] ?? labels.defaultResultsGroup,
+              children: typeHits.map((hit) => /* @__PURE__ */ jsxRuntime.jsx(
+                CommandItem,
+                {
+                  value: hit.id,
+                  onSelect: () => handleSelect({ kind: "hit", hit }),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: hit.title }),
+                    hit.snippet ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground", children: hit.snippet }) : null
+                  ] })
+                },
+                hit.id
+              ))
+            },
+            type
+          ))
+        ] })
+      ]
+    }
+  );
+}
+function useSearchHotkey(options = {}) {
+  const { defaultOpen = false, disabled = false } = options;
+  const [open, setOpen] = React7.useState(defaultOpen);
+  const toggle = React7.useCallback(() => setOpen((prev) => !prev), []);
+  React7.useEffect(() => {
+    if (disabled) return;
+    function handleKeyDown(event) {
+      if (event.key.toLowerCase() !== "k") return;
+      if (!event.metaKey && !event.ctrlKey) return;
+      event.preventDefault();
+      setOpen((prev) => !prev);
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [disabled]);
+  return { open, setOpen, toggle };
+}
 function onlyDigits(s, max) {
   return s.replace(/\D/g, "").slice(0, max);
 }
@@ -10145,6 +10482,15 @@ exports.ChatRoomView = ChatRoomView;
 exports.ChatSidebar = ChatSidebar;
 exports.ChatSidebarContext = ChatSidebarContext;
 exports.ChatSidebarProvider = ChatSidebarProvider;
+exports.Command = Command;
+exports.CommandDialog = CommandDialog;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -10207,6 +10553,7 @@ exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
+exports.SearchCommand = SearchCommand;
 exports.Slider = Slider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.Toggle = Toggle;
@@ -10224,6 +10571,7 @@ exports.createLiveHlsConfig = createLiveHlsConfig;
 exports.createVodHlsConfig = createVodHlsConfig;
 exports.defaultLanguages = defaultLanguages;
 exports.describePlaybackError = describePlaybackError;
+exports.fuzzyMatch = fuzzyMatch;
 exports.getEnvironmentDotClass = getEnvironmentDotClass;
 exports.getEnvironmentLabel = getEnvironmentLabel;
 exports.isBlocksDataEnvironment = isBlocksDataEnvironment;
@@ -10240,5 +10588,6 @@ exports.useHlsPlayback = useHlsPlayback;
 exports.useLanguageContext = useLanguageContext;
 exports.useNotificationsContext = useNotificationsContext;
 exports.usePlaybackStats = usePlaybackStats;
+exports.useSearchHotkey = useSearchHotkey;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map