@algenium/blocks 1.14.1 → 1.16.0

package/dist/index.cjs

@@ -17,7 +17,10 @@ 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');
+var RPNInput = require('react-phone-number-input');
+var flags = require('react-phone-number-input/flags');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -48,6 +51,8 @@ var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitiv
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var valid__default = /*#__PURE__*/_interopDefault(valid);
+var RPNInput__namespace = /*#__PURE__*/_interopNamespace(RPNInput);
+var flags__default = /*#__PURE__*/_interopDefault(flags);
 
 var CalendarContext = React7.createContext(null);
 function useCalendarContext() {
@@ -3902,7 +3907,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 +3917,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 +9197,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);
 }
@@ -9952,6 +10293,166 @@ function USAddressInput({
     ] })
   ] });
 }
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var PhoneInput = React7__namespace.forwardRef(
+  ({ className, onChange, value, defaultCountry = "MX", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RPNInput__namespace.default,
+      {
+        ref,
+        className: cn("flex", className),
+        flagComponent: FlagComponent,
+        countrySelectComponent: CountrySelect,
+        inputComponent: InputComponent,
+        smartCaret: false,
+        defaultCountry,
+        value: value || void 0,
+        onChange: (nextValue) => onChange?.(nextValue || ""),
+        ...props
+      }
+    );
+  }
+);
+PhoneInput.displayName = "PhoneInput";
+var InputComponent = React7__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  Input,
+  {
+    className: cn("rounded-e-lg rounded-s-none", className),
+    ...props,
+    ref
+  }
+));
+InputComponent.displayName = "InputComponent";
+var CountrySelect = ({
+  disabled,
+  value: selectedCountry,
+  options: countryList,
+  onChange
+}) => {
+  const scrollAreaRef = React7__namespace.useRef(null);
+  const [searchValue, setSearchValue] = React7__namespace.useState("");
+  const [isOpen, setIsOpen] = React7__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Popover,
+    {
+      open: isOpen,
+      modal: true,
+      onOpenChange: (open) => {
+        setIsOpen(open);
+        if (open) setSearchValue("");
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            className: "flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10",
+            disabled,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FlagComponent,
+                {
+                  country: selectedCountry,
+                  countryName: selectedCountry
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.ChevronsUpDown,
+                {
+                  className: cn(
+                    "-mr-2 size-4 opacity-50",
+                    disabled ? "hidden" : "opacity-100"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[300px] p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CommandInput,
+            {
+              value: searchValue,
+              onValueChange: (value) => {
+                setSearchValue(value);
+                setTimeout(() => {
+                  if (scrollAreaRef.current) {
+                    const viewportElement = scrollAreaRef.current.querySelector(
+                      "[data-radix-scroll-area-viewport]"
+                    );
+                    if (viewportElement) {
+                      viewportElement.scrollTop = 0;
+                    }
+                  }
+                }, 0);
+              },
+              placeholder: "Search country..."
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No country found." }),
+            /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: countryList.map(
+              ({ value, label }) => value ? /* @__PURE__ */ jsxRuntime.jsx(
+                CountrySelectOption,
+                {
+                  country: value,
+                  countryName: label,
+                  selectedCountry,
+                  onChange,
+                  onSelectComplete: () => setIsOpen(false)
+                },
+                value
+              ) : null
+            ) })
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+};
+var CountrySelectOption = ({
+  country,
+  countryName,
+  selectedCountry,
+  onChange,
+  onSelectComplete
+}) => {
+  const handleSelect = () => {
+    onChange(country);
+    onSelectComplete();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(CommandItem, { className: "gap-2", onSelect: handleSelect, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FlagComponent, { country, countryName }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm", children: countryName }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground/50", children: `+${RPNInput__namespace.getCountryCallingCode(country)}` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.CheckIcon,
+      {
+        className: `ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`
+      }
+    )
+  ] });
+};
+var FlagComponent = ({ country, countryName }) => {
+  const Flag2 = flags__default.default[country];
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg:not([class*='size-'])]:size-full", children: Flag2 && /* @__PURE__ */ jsxRuntime.jsx(Flag2, { title: countryName }) });
+};
 
 // src/data/mexicoStates.ts
 var MEXICO_STATES = [
@@ -10145,6 +10646,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;
@@ -10201,12 +10711,14 @@ exports.MiniCalendar = MiniCalendar;
 exports.NotificationsContext = NotificationsContext;
 exports.NotificationsWidget = NotificationsWidget;
 exports.OrgSwitcher = OrgSwitcher;
+exports.PhoneInput = PhoneInput;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 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 +10736,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 +10753,6 @@ exports.useHlsPlayback = useHlsPlayback;
 exports.useLanguageContext = useLanguageContext;
 exports.useNotificationsContext = useNotificationsContext;
 exports.usePlaybackStats = usePlaybackStats;
+exports.useSearchHotkey = useSearchHotkey;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map