@mdigital_ui/ui 0.3.9 → 0.4.0

package/dist/chunk-WRSG7WU5.js

@@ -1,278 +0,0 @@
-import { getValidationStatus } from './chunk-NGYLRX6F.js';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import React, { useId, useCallback } from 'react';
-
-function useSelectBase(config) {
-  const {
-    options,
-    virtualizeThreshold = 50,
-    maxDropdownHeight = 300,
-    label,
-    idPrefix,
-    error,
-    warning,
-    info,
-    success,
-    helperText
-  } = config;
-  const uniqueId = useId();
-  const labelId = `${idPrefix}-label-${uniqueId}`;
-  const listboxId = `${idPrefix}-listbox-${uniqueId}`;
-  const helperId = `${idPrefix}-helper-${uniqueId}`;
-  const { status, message: helperMessage } = getValidationStatus({
-    error,
-    warning,
-    info,
-    success,
-    helperText
-  });
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [parentNode, setParentNode] = React.useState(
-    null
-  );
-  const [searchQuery, setSearchQuery] = React.useState("");
-  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
-  const [showTopArrow, setShowTopArrow] = React.useState(false);
-  const [showBottomArrow, setShowBottomArrow] = React.useState(false);
-  const triggerRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const scrollContainerRef = React.useRef(null);
-  const onSelectRef = React.useRef(config.onSelectOption);
-  React.useEffect(() => {
-    onSelectRef.current = config.onSelectOption;
-  }, [config.onSelectOption]);
-  const groupedOptions = React.useMemo(() => {
-    const groups = {};
-    const ungrouped = [];
-    options.forEach((option) => {
-      if (option.group) {
-        if (!groups[option.group]) {
-          groups[option.group] = [];
-        }
-        groups[option.group].push(option);
-      } else {
-        ungrouped.push(option);
-      }
-    });
-    return { groups, ungrouped };
-  }, [options]);
-  const flattenedOptions = React.useMemo(() => {
-    const items = [];
-    groupedOptions.ungrouped.forEach((option) => {
-      items.push({ type: "option", data: option });
-    });
-    Object.entries(groupedOptions.groups).forEach(
-      ([groupName, groupOptions]) => {
-        items.push({ type: "group", data: groupName });
-        groupOptions.forEach((option) => {
-          items.push({ type: "option", data: option });
-        });
-      }
-    );
-    return items;
-  }, [groupedOptions]);
-  const filteredOptions = React.useMemo(() => {
-    if (!searchQuery) return flattenedOptions;
-    const query = searchQuery.toLowerCase();
-    const matchingOptions = new Set(
-      flattenedOptions.filter(
-        (item) => item.type === "option" && item.data.label.toLowerCase().includes(query)
-      )
-    );
-    return flattenedOptions.filter((item) => {
-      if (item.type === "group") {
-        const groupName = item.data;
-        return flattenedOptions.some(
-          (other) => other.type === "option" && other.data.group === groupName && matchingOptions.has(other)
-        );
-      }
-      return matchingOptions.has(item);
-    });
-  }, [flattenedOptions, searchQuery]);
-  const selectableOptions = React.useMemo(
-    () => filteredOptions.filter(
-      (item) => item.type === "option" && !item.data.disabled
-    ),
-    [filteredOptions]
-  );
-  const shouldVirtualize = filteredOptions.length > virtualizeThreshold;
-  const virtualizer = useVirtualizer({
-    count: filteredOptions.length,
-    getScrollElement: () => parentNode,
-    estimateSize: () => 40,
-    enabled: shouldVirtualize,
-    overscan: 10
-  });
-  const virtualizerRef = React.useRef(virtualizer);
-  React.useEffect(() => {
-    virtualizerRef.current = virtualizer;
-  }, [virtualizer]);
-  const refCallback = useCallback((node) => {
-    if (node) {
-      setParentNode(node);
-      scrollContainerRef.current = node;
-    }
-  }, []);
-  const handleInputChange = React.useCallback(
-    (e) => {
-      setSearchQuery(e.target.value);
-      if (!isOpen) setIsOpen(true);
-    },
-    [isOpen]
-  );
-  const handleInputClick = React.useCallback(
-    (e) => {
-      e.stopPropagation();
-      if (!isOpen) setIsOpen(true);
-    },
-    [isOpen]
-  );
-  const handleScroll = React.useCallback(
-    (e) => {
-      const element = e.currentTarget;
-      const { scrollTop, scrollHeight, clientHeight } = element;
-      setShowTopArrow(scrollTop > 0);
-      setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);
-    },
-    []
-  );
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      if (!isOpen && e.key !== "Tab") {
-        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
-          e.preventDefault();
-          setIsOpen(true);
-        }
-        return;
-      }
-      const currentSelectableOptions = filteredOptions.filter(
-        (item) => item.type === "option" && !item.data.disabled
-      );
-      switch (e.key) {
-        case "Escape":
-          e.preventDefault();
-          setIsOpen(false);
-          setSearchQuery("");
-          setHighlightedIndex(-1);
-          inputRef.current?.blur();
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          setHighlightedIndex((prev) => {
-            const nextIndex = Math.min(
-              prev + 1,
-              currentSelectableOptions.length - 1
-            );
-            const option = currentSelectableOptions[nextIndex];
-            if (option) {
-              const optionIndex = filteredOptions.indexOf(option);
-              if (shouldVirtualize && virtualizerRef.current) {
-                virtualizerRef.current.scrollToIndex(optionIndex, {
-                  align: "auto"
-                });
-              }
-            }
-            return nextIndex;
-          });
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          setHighlightedIndex((prev) => {
-            const nextIndex = Math.max(prev - 1, 0);
-            const option = currentSelectableOptions[nextIndex];
-            if (option) {
-              const optionIndex = filteredOptions.indexOf(option);
-              if (shouldVirtualize && virtualizerRef.current) {
-                virtualizerRef.current.scrollToIndex(optionIndex, {
-                  align: "auto"
-                });
-              }
-            }
-            return nextIndex;
-          });
-          break;
-        case "Enter":
-          e.preventDefault();
-          if (highlightedIndex >= 0 && highlightedIndex < currentSelectableOptions.length) {
-            const item = currentSelectableOptions[highlightedIndex];
-            if (item) {
-              const option = item.data;
-              onSelectRef.current(option);
-            }
-          }
-          break;
-        case "Home":
-          e.preventDefault();
-          setHighlightedIndex(0);
-          if (shouldVirtualize && virtualizerRef.current) {
-            virtualizerRef.current.scrollToIndex(0);
-          }
-          break;
-        case "End":
-          e.preventDefault();
-          setHighlightedIndex(currentSelectableOptions.length - 1);
-          if (shouldVirtualize && virtualizerRef.current) {
-            virtualizerRef.current.scrollToIndex(filteredOptions.length - 1);
-          }
-          break;
-      }
-    },
-    [isOpen, filteredOptions, highlightedIndex, shouldVirtualize]
-  );
-  React.useEffect(() => {
-    if (isOpen) {
-      const timeoutId = setTimeout(() => {
-        const element = scrollContainerRef.current;
-        if (element) {
-          const { scrollTop, scrollHeight, clientHeight } = element;
-          setShowTopArrow(scrollTop > 0);
-          setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);
-        }
-      }, 50);
-      return () => clearTimeout(timeoutId);
-    } else {
-      setShowTopArrow(false);
-      setShowBottomArrow(false);
-      return void 0;
-    }
-  }, [isOpen, filteredOptions, shouldVirtualize]);
-  return {
-    // State
-    isOpen,
-    setIsOpen,
-    searchQuery,
-    setSearchQuery,
-    highlightedIndex,
-    setHighlightedIndex,
-    showTopArrow,
-    showBottomArrow,
-    // Refs
-    triggerRef,
-    inputRef,
-    scrollContainerRef,
-    // Computed
-    filteredOptions,
-    selectableOptions,
-    shouldVirtualize,
-    virtualizer,
-    maxDropdownHeight,
-    label,
-    // IDs & validation
-    uniqueId,
-    labelId,
-    listboxId,
-    helperId,
-    status,
-    helperMessage,
-    // Handlers
-    handleInputChange,
-    handleInputClick,
-    handleScroll,
-    handleKeyDown,
-    refCallback
-  };
-}
-
-export { useSelectBase };
-//# sourceMappingURL=chunk-WRSG7WU5.js.map
-//# sourceMappingURL=chunk-WRSG7WU5.js.map

package/dist/chunk-WRSG7WU5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shared/useSelectBase.ts"],"names":[],"mappings":";;;;AAwCO,SAAS,cACd,MAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,mBAAA,GAAsB,EAAA;AAAA,IACtB,iBAAA,GAAoB,GAAA;AAAA,IACpB,KAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF,GAAI,MAAA;AAGJ,EAAA,MAAM,WAAW,KAAA,EAAM;AACvB,EAAA,MAAM,OAAA,GAAU,CAAA,EAAG,QAAQ,CAAA,OAAA,EAAU,QAAQ,CAAA,CAAA;AAC7C,EAAA,MAAM,SAAA,GAAY,CAAA,EAAG,QAAQ,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAA;AACjD,EAAA,MAAM,QAAA,GAAW,CAAA,EAAG,QAAQ,CAAA,QAAA,EAAW,QAAQ,CAAA,CAAA;AAE/C,EAAA,MAAM,EAAE,MAAA,EAAQ,OAAA,EAAS,aAAA,KAAkB,mBAAA,CAAoB;AAAA,IAC7D,KAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,KAAA,CAAM,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,KAAA,CAAM,QAAA;AAAA,IACxC;AAAA,GACF;AACA,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,KAAA,CAAM,SAAS,EAAE,CAAA;AACvD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,KAAA,CAAM,SAAS,EAAE,CAAA;AACjE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,KAAA,CAAM,SAAS,KAAK,CAAA;AAC5D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,KAAA,CAAM,SAAS,KAAK,CAAA;AAGlE,EAAA,MAAM,UAAA,GAAa,KAAA,CAAM,MAAA,CAA0B,IAAI,CAAA;AACvD,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,MAAA,CAAyB,IAAI,CAAA;AACpD,EAAA,MAAM,kBAAA,GAAqB,KAAA,CAAM,MAAA,CAAuB,IAAI,CAAA;AAG5D,EAAA,MAAM,WAAA,GAAc,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,cAAc,CAAA;AACtD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,WAAA,CAAY,UAAU,MAAA,CAAO,cAAA;AAAA,EAC/B,CAAA,EAAG,CAAC,MAAA,CAAO,cAAc,CAAC,CAAA;AAG1B,EAAA,MAAM,cAAA,GAAiB,KAAA,CAAM,OAAA,CAAQ,MAAM;AACzC,IAAA,MAAM,SAA8B,EAAC;AACrC,IAAA,MAAM,YAAiB,EAAC;AAExB,IAAA,OAAA,CAAQ,OAAA,CAAQ,CAAC,MAAA,KAAW;AAC1B,MAAA,IAAI,OAAO,KAAA,EAAO;AAChB,QAAA,IAAI,CAAC,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA,EAAG;AACzB,UAAA,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA,GAAI,EAAC;AAAA,QAC1B;AACA,QAAA,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA,CAAG,IAAA,CAAK,MAAM,CAAA;AAAA,MACnC,CAAA,MAAO;AACL,QAAA,SAAA,CAAU,KAAK,MAAM,CAAA;AAAA,MACvB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,OAAO,EAAE,QAAQ,SAAA,EAAU;AAAA,EAC7B,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,gBAAA,GAAmB,KAAA,CAAM,OAAA,CAAQ,MAAM;AAC3C,IAAA,MAAM,QAAiC,EAAC;AAExC,IAAA,cAAA,CAAe,SAAA,CAAU,OAAA,CAAQ,CAAC,MAAA,KAAW;AAC3C,MAAA,KAAA,CAAM,KAAK,EAAE,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,QAAQ,CAAA;AAAA,IAC7C,CAAC,CAAA;AAED,IAAA,MAAA,CAAO,OAAA,CAAQ,cAAA,CAAe,MAAM,CAAA,CAAE,OAAA;AAAA,MACpC,CAAC,CAAC,SAAA,EAAW,YAAY,CAAA,KAAM;AAC7B,QAAA,KAAA,CAAM,KAAK,EAAE,IAAA,EAAM,OAAA,EAAS,IAAA,EAAM,WAAW,CAAA;AAC7C,QAAC,YAAA,CAAqB,OAAA,CAAQ,CAAC,MAAA,KAAW;AACxC,UAAA,KAAA,CAAM,KAAK,EAAE,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,QAAQ,CAAA;AAAA,QAC7C,CAAC,CAAA;AAAA,MACH;AAAA,KACF;AAEA,IAAA,OAAO,KAAA;AAAA,EACT,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,MAAM,eAAA,GAAkB,KAAA,CAAM,OAAA,CAAQ,MAAM;AAC1C,IAAA,IAAI,CAAC,aAAa,OAAO,gBAAA;AAEzB,IAAA,MAAM,KAAA,GAAQ,YAAY,WAAA,EAAY;AACtC,IAAA,MAAM,kBAAkB,IAAI,GAAA;AAAA,MAC1B,gBAAA,CAAiB,MAAA;AAAA,QACf,CAAC,IAAA,KACC,IAAA,CAAK,IAAA,KAAS,QAAA,IACb,IAAA,CAAK,IAAA,CAAW,KAAA,CAAM,WAAA,EAAY,CAAE,QAAA,CAAS,KAAK;AAAA;AACvD,KACF;AAEA,IAAA,OAAO,gBAAA,CAAiB,MAAA,CAAO,CAAC,IAAA,KAAS;AACvC,MAAA,IAAI,IAAA,CAAK,SAAS,OAAA,EAAS;AACzB,QAAA,MAAM,YAAY,IAAA,CAAK,IAAA;AACvB,QAAA,OAAO,gBAAA,CAAiB,IAAA;AAAA,UACtB,CAAC,KAAA,KACC,KAAA,CAAM,IAAA,KAAS,QAAA,IACd,KAAA,CAAM,IAAA,CAAW,KAAA,KAAU,SAAA,IAC5B,eAAA,CAAgB,GAAA,CAAI,KAAK;AAAA,SAC7B;AAAA,MACF;AACA,MAAA,OAAO,eAAA,CAAgB,IAAI,IAAI,CAAA;AAAA,IACjC,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,gBAAA,EAAkB,WAAW,CAAC,CAAA;AAElC,EAAA,MAAM,oBAAoB,KAAA,CAAM,OAAA;AAAA,IAC9B,MACE,eAAA,CAAgB,MAAA;AAAA,MACd,CAAC,IAAA,KAAS,IAAA,CAAK,SAAS,QAAA,IAAY,CAAE,KAAK,IAAA,CAAW;AAAA,KACxD;AAAA,IACF,CAAC,eAAe;AAAA,GAClB;AAEA,EAAA,MAAM,gBAAA,GAAmB,gBAAgB,MAAA,GAAS,mBAAA;AAGlD,EAAA,MAAM,cAAc,cAAA,CAAe;AAAA,IACjC,OAAO,eAAA,CAAgB,MAAA;AAAA,IACvB,kBAAkB,MAAM,UAAA;AAAA,IACxB,cAAc,MAAM,EAAA;AAAA,IACpB,OAAA,EAAS,gBAAA;AAAA,IACT,QAAA,EAAU;AAAA,GACX,CAAA;AAED,EAAA,MAAM,cAAA,GAAiB,KAAA,CAAM,MAAA,CAAO,WAAW,CAAA;AAC/C,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,cAAA,CAAe,OAAA,GAAU,WAAA;AAAA,EAC3B,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,CAAC,IAAA,KAAyB;AACxD,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,aAAA,CAAc,IAAI,CAAA;AAClB,MAAA,kBAAA,CAAmB,OAAA,GAAU,IAAA;AAAA,IAC/B;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,MAAM,oBAAoB,KAAA,CAAM,WAAA;AAAA,IAC9B,CAAC,CAAA,KAA2C;AAC1C,MAAA,cAAA,CAAe,CAAA,CAAE,OAAO,KAAK,CAAA;AAC7B,MAAA,IAAI,CAAC,MAAA,EAAQ,SAAA,CAAU,IAAI,CAAA;AAAA,IAC7B,CAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,mBAAmB,KAAA,CAAM,WAAA;AAAA,IAC7B,CAAC,CAAA,KAAwB;AACvB,MAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,MAAA,IAAI,CAAC,MAAA,EAAQ,SAAA,CAAU,IAAI,CAAA;AAAA,IAC7B,CAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,eAAe,KAAA,CAAM,WAAA;AAAA,IACzB,CAAC,CAAA,KAAqC;AACpC,MAAA,MAAM,UAAU,CAAA,CAAE,aAAA;AAClB,MAAA,MAAM,EAAE,SAAA,EAAW,YAAA,EAAc,YAAA,EAAa,GAAI,OAAA;AAElD,MAAA,eAAA,CAAgB,YAAY,CAAC,CAAA;AAC7B,MAAA,kBAAA,CAAmB,SAAA,GAAY,YAAA,GAAe,YAAA,GAAe,CAAC,CAAA;AAAA,IAChE,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,gBAAgB,KAAA,CAAM,WAAA;AAAA,IAC1B,CAAC,CAAA,KAA2B;AAC1B,MAAA,IAAI,CAAC,MAAA,IAAU,CAAA,CAAE,GAAA,KAAQ,KAAA,EAAO;AAC9B,QAAA,IAAI,CAAA,CAAE,QAAQ,OAAA,IAAW,CAAA,CAAE,QAAQ,GAAA,IAAO,CAAA,CAAE,QAAQ,WAAA,EAAa;AAC/D,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,SAAA,CAAU,IAAI,CAAA;AAAA,QAChB;AACA,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,2BAA2B,eAAA,CAAgB,MAAA;AAAA,QAC/C,CAAC,IAAA,KAAS,IAAA,CAAK,SAAS,QAAA,IAAY,CAAE,KAAK,IAAA,CAAW;AAAA,OACxD;AAEA,MAAA,QAAQ,EAAE,GAAA;AAAK,QACb,KAAK,QAAA;AACH,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,SAAA,CAAU,KAAK,CAAA;AACf,UAAA,cAAA,CAAe,EAAE,CAAA;AACjB,UAAA,mBAAA,CAAoB,EAAE,CAAA;AACtB,UAAA,QAAA,CAAS,SAAS,IAAA,EAAK;AACvB,UAAA;AAAA,QAEF,KAAK,WAAA;AACH,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,mBAAA,CAAoB,CAAC,IAAA,KAAS;AAC5B,YAAA,MAAM,YAAY,IAAA,CAAK,GAAA;AAAA,cACrB,IAAA,GAAO,CAAA;AAAA,cACP,yBAAyB,MAAA,GAAS;AAAA,aACpC;AACA,YAAA,MAAM,MAAA,GAAS,yBAAyB,SAAS,CAAA;AACjD,YAAA,IAAI,MAAA,EAAQ;AACV,cAAA,MAAM,WAAA,GAAc,eAAA,CAAgB,OAAA,CAAQ,MAAM,CAAA;AAClD,cAAA,IAAI,gBAAA,IAAoB,eAAe,OAAA,EAAS;AAC9C,gBAAA,cAAA,CAAe,OAAA,CAAQ,cAAc,WAAA,EAAa;AAAA,kBAChD,KAAA,EAAO;AAAA,iBACR,CAAA;AAAA,cACH;AAAA,YACF;AACA,YAAA,OAAO,SAAA;AAAA,UACT,CAAC,CAAA;AACD,UAAA;AAAA,QAEF,KAAK,SAAA;AACH,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,mBAAA,CAAoB,CAAC,IAAA,KAAS;AAC5B,YAAA,MAAM,SAAA,GAAY,IAAA,CAAK,GAAA,CAAI,IAAA,GAAO,GAAG,CAAC,CAAA;AACtC,YAAA,MAAM,MAAA,GAAS,yBAAyB,SAAS,CAAA;AACjD,YAAA,IAAI,MAAA,EAAQ;AACV,cAAA,MAAM,WAAA,GAAc,eAAA,CAAgB,OAAA,CAAQ,MAAM,CAAA;AAClD,cAAA,IAAI,gBAAA,IAAoB,eAAe,OAAA,EAAS;AAC9C,gBAAA,cAAA,CAAe,OAAA,CAAQ,cAAc,WAAA,EAAa;AAAA,kBAChD,KAAA,EAAO;AAAA,iBACR,CAAA;AAAA,cACH;AAAA,YACF;AACA,YAAA,OAAO,SAAA;AAAA,UACT,CAAC,CAAA;AACD,UAAA;AAAA,QAEF,KAAK,OAAA;AACH,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,IACE,gBAAA,IAAoB,CAAA,IACpB,gBAAA,GAAmB,wBAAA,CAAyB,MAAA,EAC5C;AACA,YAAA,MAAM,IAAA,GAAO,yBAAyB,gBAAgB,CAAA;AACtD,YAAA,IAAI,IAAA,EAAM;AACR,cAAA,MAAM,SAAS,IAAA,CAAK,IAAA;AACpB,cAAA,WAAA,CAAY,QAAQ,MAAM,CAAA;AAAA,YAC5B;AAAA,UACF;AACA,UAAA;AAAA,QAEF,KAAK,MAAA;AACH,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,mBAAA,CAAoB,CAAC,CAAA;AACrB,UAAA,IAAI,gBAAA,IAAoB,eAAe,OAAA,EAAS;AAC9C,YAAA,cAAA,CAAe,OAAA,CAAQ,cAAc,CAAC,CAAA;AAAA,UACxC;AACA,UAAA;AAAA,QAEF,KAAK,KAAA;AACH,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,mBAAA,CAAoB,wBAAA,CAAyB,SAAS,CAAC,CAAA;AACvD,UAAA,IAAI,gBAAA,IAAoB,eAAe,OAAA,EAAS;AAC9C,YAAA,cAAA,CAAe,OAAA,CAAQ,aAAA,CAAc,eAAA,CAAgB,MAAA,GAAS,CAAC,CAAA;AAAA,UACjE;AACA,UAAA;AAGA;AACJ,IACF,CAAA;AAAA,IACA,CAAC,MAAA,EAAQ,eAAA,EAAiB,gBAAA,EAAkB,gBAAgB;AAAA,GAC9D;AAIA,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAM,SAAA,GAAY,WAAW,MAAM;AACjC,QAAA,MAAM,UAAU,kBAAA,CAAmB,OAAA;AACnC,QAAA,IAAI,OAAA,EAAS;AACX,UAAA,MAAM,EAAE,SAAA,EAAW,YAAA,EAAc,YAAA,EAAa,GAAI,OAAA;AAClD,UAAA,eAAA,CAAgB,YAAY,CAAC,CAAA;AAC7B,UAAA,kBAAA,CAAmB,SAAA,GAAY,YAAA,GAAe,YAAA,GAAe,CAAC,CAAA;AAAA,QAChE;AAAA,MACF,GAAG,EAAE,CAAA;AAEL,MAAA,OAAO,MAAM,aAAa,SAAS,CAAA;AAAA,IACrC,CAAA,MAAO;AACL,MAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,MAAA,kBAAA,CAAmB,KAAK,CAAA;AACxB,MAAA,OAAO,MAAA;AAAA,IACT;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,eAAA,EAAiB,gBAAgB,CAAC,CAAA;AAG9C,EAAA,OAAO;AAAA;AAAA,IAEL,MAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA;AAAA,IAGA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,kBAAA;AAAA;AAAA,IAGA,eAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,KAAA;AAAA;AAAA,IAGA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA;AAAA,IAGA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AACF","file":"chunk-WRSG7WU5.js","sourcesContent":["import { useVirtualizer } from \"@tanstack/react-virtual\";\nimport React, { useCallback, useId } from \"react\";\n\nimport { getValidationStatus } from \"../utils\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface SelectBaseOption {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n  group?: string;\n}\n\nexport interface UseSelectBaseConfig<O extends SelectBaseOption> {\n  options: O[];\n  /** Called when the user presses Enter on a highlighted option (or clicks one via the hook's helpers). */\n  onSelectOption: (option: O) => void;\n  virtualizeThreshold?: number;\n  maxDropdownHeight?: number;\n  label?: string;\n  idPrefix: string; // 'select' or 'multiselect'\n  error?: string | boolean;\n  warning?: string | boolean;\n  info?: string | boolean;\n  success?: string | boolean;\n  helperText?: string;\n}\n\nexport interface FlattenedItem<O extends SelectBaseOption> {\n  type: \"option\" | \"group\";\n  data: O | string;\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\nexport function useSelectBase<O extends SelectBaseOption>(\n  config: UseSelectBaseConfig<O>,\n) {\n  const {\n    options,\n    virtualizeThreshold = 50,\n    maxDropdownHeight = 300,\n    label,\n    idPrefix,\n    error,\n    warning,\n    info,\n    success,\n    helperText,\n  } = config;\n\n  // -- IDs / validation -------------------------------------------------------\n  const uniqueId = useId();\n  const labelId = `${idPrefix}-label-${uniqueId}`;\n  const listboxId = `${idPrefix}-listbox-${uniqueId}`;\n  const helperId = `${idPrefix}-helper-${uniqueId}`;\n\n  const { status, message: helperMessage } = getValidationStatus({\n    error,\n    warning,\n    info,\n    success,\n    helperText,\n  });\n\n  // -- State ------------------------------------------------------------------\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [parentNode, setParentNode] = React.useState<HTMLDivElement | null>(\n    null,\n  );\n  const [searchQuery, setSearchQuery] = React.useState(\"\");\n  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);\n  const [showTopArrow, setShowTopArrow] = React.useState(false);\n  const [showBottomArrow, setShowBottomArrow] = React.useState(false);\n\n  // -- Refs -------------------------------------------------------------------\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  // Store onSelectOption in a ref so handleKeyDown doesn't depend on it\n  const onSelectRef = React.useRef(config.onSelectOption);\n  React.useEffect(() => {\n    onSelectRef.current = config.onSelectOption;\n  }, [config.onSelectOption]);\n\n  // -- Memos ------------------------------------------------------------------\n  const groupedOptions = React.useMemo(() => {\n    const groups: Record<string, O[]> = {};\n    const ungrouped: O[] = [];\n\n    options.forEach((option) => {\n      if (option.group) {\n        if (!groups[option.group]) {\n          groups[option.group] = [];\n        }\n        groups[option.group]!.push(option);\n      } else {\n        ungrouped.push(option);\n      }\n    });\n\n    return { groups, ungrouped };\n  }, [options]);\n\n  const flattenedOptions = React.useMemo(() => {\n    const items: Array<FlattenedItem<O>> = [];\n\n    groupedOptions.ungrouped.forEach((option) => {\n      items.push({ type: \"option\", data: option });\n    });\n\n    Object.entries(groupedOptions.groups).forEach(\n      ([groupName, groupOptions]) => {\n        items.push({ type: \"group\", data: groupName });\n        (groupOptions as O[]).forEach((option) => {\n          items.push({ type: \"option\", data: option });\n        });\n      },\n    );\n\n    return items;\n  }, [groupedOptions]);\n\n  const filteredOptions = React.useMemo(() => {\n    if (!searchQuery) return flattenedOptions;\n\n    const query = searchQuery.toLowerCase();\n    const matchingOptions = new Set(\n      flattenedOptions.filter(\n        (item) =>\n          item.type === \"option\" &&\n          (item.data as O).label.toLowerCase().includes(query),\n      ),\n    );\n\n    return flattenedOptions.filter((item) => {\n      if (item.type === \"group\") {\n        const groupName = item.data as string;\n        return flattenedOptions.some(\n          (other) =>\n            other.type === \"option\" &&\n            (other.data as O).group === groupName &&\n            matchingOptions.has(other),\n        );\n      }\n      return matchingOptions.has(item);\n    });\n  }, [flattenedOptions, searchQuery]);\n\n  const selectableOptions = React.useMemo(\n    () =>\n      filteredOptions.filter(\n        (item) => item.type === \"option\" && !(item.data as O).disabled,\n      ),\n    [filteredOptions],\n  );\n\n  const shouldVirtualize = filteredOptions.length > virtualizeThreshold;\n\n  // -- Virtualizer ------------------------------------------------------------\n  const virtualizer = useVirtualizer({\n    count: filteredOptions.length,\n    getScrollElement: () => parentNode,\n    estimateSize: () => 40,\n    enabled: shouldVirtualize,\n    overscan: 10,\n  });\n\n  const virtualizerRef = React.useRef(virtualizer);\n  React.useEffect(() => {\n    virtualizerRef.current = virtualizer;\n  }, [virtualizer]);\n\n  const refCallback = useCallback((node: HTMLDivElement) => {\n    if (node) {\n      setParentNode(node);\n      scrollContainerRef.current = node;\n    }\n  }, []);\n\n  // -- Handlers ---------------------------------------------------------------\n  const handleInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setSearchQuery(e.target.value);\n      if (!isOpen) setIsOpen(true);\n    },\n    [isOpen],\n  );\n\n  const handleInputClick = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (!isOpen) setIsOpen(true);\n    },\n    [isOpen],\n  );\n\n  const handleScroll = React.useCallback(\n    (e: React.UIEvent<HTMLDivElement>) => {\n      const element = e.currentTarget;\n      const { scrollTop, scrollHeight, clientHeight } = element;\n\n      setShowTopArrow(scrollTop > 0);\n      setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);\n    },\n    [],\n  );\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!isOpen && e.key !== \"Tab\") {\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setIsOpen(true);\n        }\n        return;\n      }\n\n      const currentSelectableOptions = filteredOptions.filter(\n        (item) => item.type === \"option\" && !(item.data as O).disabled,\n      );\n\n      switch (e.key) {\n        case \"Escape\":\n          e.preventDefault();\n          setIsOpen(false);\n          setSearchQuery(\"\");\n          setHighlightedIndex(-1);\n          inputRef.current?.blur();\n          break;\n\n        case \"ArrowDown\":\n          e.preventDefault();\n          setHighlightedIndex((prev) => {\n            const nextIndex = Math.min(\n              prev + 1,\n              currentSelectableOptions.length - 1,\n            );\n            const option = currentSelectableOptions[nextIndex];\n            if (option) {\n              const optionIndex = filteredOptions.indexOf(option);\n              if (shouldVirtualize && virtualizerRef.current) {\n                virtualizerRef.current.scrollToIndex(optionIndex, {\n                  align: \"auto\",\n                });\n              }\n            }\n            return nextIndex;\n          });\n          break;\n\n        case \"ArrowUp\":\n          e.preventDefault();\n          setHighlightedIndex((prev) => {\n            const nextIndex = Math.max(prev - 1, 0);\n            const option = currentSelectableOptions[nextIndex];\n            if (option) {\n              const optionIndex = filteredOptions.indexOf(option);\n              if (shouldVirtualize && virtualizerRef.current) {\n                virtualizerRef.current.scrollToIndex(optionIndex, {\n                  align: \"auto\",\n                });\n              }\n            }\n            return nextIndex;\n          });\n          break;\n\n        case \"Enter\":\n          e.preventDefault();\n          if (\n            highlightedIndex >= 0 &&\n            highlightedIndex < currentSelectableOptions.length\n          ) {\n            const item = currentSelectableOptions[highlightedIndex];\n            if (item) {\n              const option = item.data as O;\n              onSelectRef.current(option);\n            }\n          }\n          break;\n\n        case \"Home\":\n          e.preventDefault();\n          setHighlightedIndex(0);\n          if (shouldVirtualize && virtualizerRef.current) {\n            virtualizerRef.current.scrollToIndex(0);\n          }\n          break;\n\n        case \"End\":\n          e.preventDefault();\n          setHighlightedIndex(currentSelectableOptions.length - 1);\n          if (shouldVirtualize && virtualizerRef.current) {\n            virtualizerRef.current.scrollToIndex(filteredOptions.length - 1);\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    [isOpen, filteredOptions, highlightedIndex, shouldVirtualize],\n  );\n\n  // -- Effects ----------------------------------------------------------------\n  // Check initial scroll state when dropdown opens\n  React.useEffect(() => {\n    if (isOpen) {\n      const timeoutId = setTimeout(() => {\n        const element = scrollContainerRef.current;\n        if (element) {\n          const { scrollTop, scrollHeight, clientHeight } = element;\n          setShowTopArrow(scrollTop > 0);\n          setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);\n        }\n      }, 50);\n\n      return () => clearTimeout(timeoutId);\n    } else {\n      setShowTopArrow(false);\n      setShowBottomArrow(false);\n      return undefined;\n    }\n  }, [isOpen, filteredOptions, shouldVirtualize]);\n\n  // -- Return -----------------------------------------------------------------\n  return {\n    // State\n    isOpen,\n    setIsOpen,\n    searchQuery,\n    setSearchQuery,\n    highlightedIndex,\n    setHighlightedIndex,\n    showTopArrow,\n    showBottomArrow,\n\n    // Refs\n    triggerRef,\n    inputRef,\n    scrollContainerRef,\n\n    // Computed\n    filteredOptions,\n    selectableOptions,\n    shouldVirtualize,\n    virtualizer,\n    maxDropdownHeight,\n    label,\n\n    // IDs & validation\n    uniqueId,\n    labelId,\n    listboxId,\n    helperId,\n    status,\n    helperMessage,\n\n    // Handlers\n    handleInputChange,\n    handleInputClick,\n    handleScroll,\n    handleKeyDown,\n    refCallback,\n  };\n}\n"]}

package/dist/chunk-X3YNHX77.js

@@ -1,109 +0,0 @@
-import { createNotificationColorVariants, componentColors } from './chunk-POXI7JJ4.js';
-import { cn, iconSizes } from './chunk-NGYLRX6F.js';
-import { cva } from 'class-variance-authority';
-import { X } from 'lucide-react';
-import React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var notificationVariants = cva(
-  "relative flex gap-3 rounded-md transition-colors",
-  {
-    variants: {
-      variant: {
-        default: "",
-        solid: "",
-        outline: "border-2 border-l-6",
-        soft: "border-l-6"
-      },
-      color: {
-        default: "",
-        primary: "",
-        secondary: "",
-        accent: "",
-        success: "",
-        error: "",
-        warning: "",
-        info: ""
-      },
-      size: {
-        xs: "p-2 text-xs gap-2",
-        sm: "p-3 text-sm gap-2.5",
-        md: "p-4 text-base gap-3",
-        lg: "p-5 text-lg gap-3.5"
-      }
-    },
-    compoundVariants: createNotificationColorVariants(componentColors, [
-      "default",
-      "solid",
-      "outline",
-      "soft"
-    ]),
-    defaultVariants: {
-      variant: "default",
-      color: "default",
-      size: "md"
-    }
-  }
-);
-var Notification = React.memo(
-  ({
-    title,
-    description,
-    variant = "default",
-    color = "default",
-    size = "md",
-    closable = true,
-    onClose,
-    action,
-    className,
-    classNames,
-    children
-  }) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "alert",
-        "aria-live": "polite",
-        "aria-atomic": "true",
-        className: cn(
-          "notification_root",
-          notificationVariants({ variant, color, size }),
-          className,
-          classNames?.root
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex-1 min-w-0", "notification_content", classNames?.content), children: [
-            title && /* @__PURE__ */ jsx("div", { className: cn("font-semibold mb-1 text-sm", "notification_title", classNames?.title), children: title }),
-            description && /* @__PURE__ */ jsx("div", { className: cn("text-sm opacity-90", "notification_description", classNames?.description), children: description }),
-            children && /* @__PURE__ */ jsx("div", { className: "mt-2", children }),
-            action && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: action.onClick,
-                className: cn("mt-2 text-sm font-medium underline hover:no-underline", "notification_action", classNames?.action),
-                children: action.label
-              }
-            )
-          ] }),
-          closable && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onClose,
-              className: cn("shrink-0 rounded-sm opacity-70 hover:opacity-100 transition-opacity", "notification_closeButton", classNames?.closeButton),
-              "aria-label": "Close notification",
-              children: /* @__PURE__ */ jsx(X, { className: cn(iconSizes[size], "notification_icon", classNames?.icon), "aria-hidden": "true" })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Notification.displayName = "Notification";
-var notification_default = Notification;
-
-export { notification_default };
-//# sourceMappingURL=chunk-X3YNHX77.js.map
-//# sourceMappingURL=chunk-X3YNHX77.js.map

package/dist/chunk-X3YNHX77.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/notification/index.tsx"],"names":[],"mappings":"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","file":"chunk-X3YNHX77.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { X } from 'lucide-react'\nimport React from 'react'\n\nimport { cn, iconSizes } from '../utils'\nimport { componentColors, createNotificationColorVariants } from '../variants'\nimport type { NotificationProps } from './types'\n\nconst notificationVariants = cva(\n  'relative flex gap-3 rounded-md transition-colors',\n  {\n    variants: {\n      variant: {\n        default: '',\n        solid: '',\n        outline: 'border-2 border-l-6',\n        soft: 'border-l-6',\n      },\n      color: {\n        default: '',\n        primary: '',\n        secondary: '',\n        accent: '',\n        success: '',\n        error: '',\n        warning: '',\n        info: '',\n      },\n      size: {\n        xs: 'p-2 text-xs gap-2',\n        sm: 'p-3 text-sm gap-2.5',\n        md: 'p-4 text-base gap-3',\n        lg: 'p-5 text-lg gap-3.5',\n      },\n    },\n    compoundVariants: createNotificationColorVariants(componentColors, [\n      'default',\n      'solid',\n      'outline',\n      'soft',\n    ]),\n    defaultVariants: {\n      variant: 'default',\n      color: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst Notification = React.memo<NotificationProps>(\n  ({\n    title,\n    description,\n    variant = 'default',\n    color = 'default',\n    size = 'md',\n    closable = true,\n    onClose,\n    action,\n    className,\n    classNames,\n    children,\n  }) => {\n    return (\n      <div\n        role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className={cn(\n          'notification_root',\n          notificationVariants({ variant, color, size }),\n          className,\n          classNames?.root,\n        )}\n      >\n        <div className={cn('flex-1 min-w-0', 'notification_content', classNames?.content)}>\n          {title && <div className={cn('font-semibold mb-1 text-sm', 'notification_title', classNames?.title)}>{title}</div>}\n          {description && (\n            <div className={cn('text-sm opacity-90', 'notification_description', classNames?.description)}>{description}</div>\n          )}\n          {children && <div className=\"mt-2\">{children}</div>}\n          {action && (\n            <button\n              type=\"button\"\n              onClick={action.onClick}\n              className={cn('mt-2 text-sm font-medium underline hover:no-underline', 'notification_action', classNames?.action)}\n            >\n              {action.label}\n            </button>\n          )}\n        </div>\n\n        {closable && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={cn('shrink-0 rounded-sm opacity-70 hover:opacity-100 transition-opacity', 'notification_closeButton', classNames?.closeButton)}\n            aria-label=\"Close notification\"\n          >\n            <X className={cn(iconSizes[size], 'notification_icon', classNames?.icon)} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    )\n  },\n)\n\nNotification.displayName = 'Notification'\n\nexport type * from './types'\nexport default Notification\n"]}