var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/plus/productSelect/components/TabsStructure/hooks.ts
var hooks_exports = {};
__export(hooks_exports, {
  useSelectionIndicator: () => useSelectionIndicator
});
module.exports = __toCommonJS(hooks_exports);
var import_react = require("react");
var import_utils = require("./utils");
function useSelectionIndicator(containerRef, selectedTabId, transition) {
  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)({
    width: 0,
    transform: "translateX(0)",
    transition: "none"
  });
  const [selectedTabRef, setSelectedTabRef] = (0, import_react.useState)();
  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
  const [focusRingClasses, setFocusRingClasses] = (0, import_react.useState)("");
  const setSelectedTab = (0, import_react.useCallback)((element) => {
    setSelectedTabRef(
      (prevRef) => (prevRef == null ? void 0 : prevRef.current) === element ? prevRef : { current: element }
    );
  }, []);
  const findSelectedTabByAttribute = (0, import_react.useCallback)(() => {
    if (!containerRef.current) return null;
    const selectedTab = containerRef.current.querySelector('[role="tab"][aria-selected="true"]');
    if (selectedTab) {
      setSelectedTab(selectedTab);
    }
    return selectedTab;
  }, [containerRef, setSelectedTab]);
  const findSelectedTabById = (0, import_react.useCallback)(() => {
    if (!selectedTabId || !containerRef.current) return null;
    const selectedTab = containerRef.current.querySelector(`[id="${selectedTabId}"]`);
    return selectedTab;
  }, [containerRef, selectedTabId]);
  const getTransition = (0, import_react.useCallback)((customTransition) => {
    return customTransition || "transform 300ms, width 100ms";
  }, []);
  const getDirection = (0, import_react.useCallback)(() => {
    if (!containerRef.current) return "ltr";
    return window.getComputedStyle(containerRef.current).direction || "ltr";
  }, [containerRef]);
  const updateIndicatorPosition = (0, import_react.useCallback)(() => {
    try {
      const selectedTab = findSelectedTabByAttribute() || findSelectedTabById();
      if (!selectedTab || !containerRef.current) {
        setIndicatorStyle((prev) => ({
          ...prev,
          width: 0,
          transform: "translateX(0)"
        }));
        return;
      }
      const container = containerRef.current;
      const offsetParent = selectedTab.offsetParent;
      if (!offsetParent) {
        setIndicatorStyle((prev) => ({
          ...prev,
          width: 0,
          transform: "translateX(0)"
        }));
        return;
      }
      if (!selectedTab.isConnected) {
        console.warn("useSelectionIndicator: Selected tab is no longer connected to DOM");
        return;
      }
      const direction = getDirection();
      const width = selectedTab.offsetWidth;
      if (width <= 0) {
        setIndicatorStyle((prev) => ({
          ...prev,
          width: 0,
          transform: "translateX(0)"
        }));
        return;
      }
      let left;
      if (direction === "rtl") {
        left = -1 * (offsetParent.clientWidth - selectedTab.offsetLeft - selectedTab.offsetWidth);
      } else {
        left = selectedTab.offsetLeft;
      }
      const transitionValue = getTransition(transition);
      setIndicatorStyle({
        width: `${width}px`,
        transform: `translateX(${left}px)`,
        transition: transitionValue
      });
    } catch (error) {
      console.warn("useSelectionIndicator: Error updating indicator position:", error);
      setIndicatorStyle((prev) => ({
        ...prev,
        width: 0,
        transform: "translateX(0)"
      }));
    }
  }, [containerRef, selectedTabId, transition, findSelectedTabByAttribute, findSelectedTabById, getDirection, getTransition]);
  const debouncedUpdate = (0, import_react.useMemo)(
    () => (0, import_utils.debounce)(updateIndicatorPosition, 50),
    [updateIndicatorPosition]
  );
  const handleFocusIn = (0, import_react.useCallback)((event) => {
    setIsFocusVisible(event.target instanceof HTMLElement && event.target.matches(":focus-visible"));
    setFocusRingClasses(event.target instanceof HTMLElement && event.target.matches(":focus-visible") ? "focus-visible" : "");
  }, []);
  const handleFocusOut = (0, import_react.useCallback)(() => {
    setIsFocusVisible(false);
    setFocusRingClasses("");
  }, []);
  const handleMouseDown = (0, import_react.useCallback)(() => {
    setIsFocusVisible(false);
    setFocusRingClasses("");
  }, []);
  (0, import_react.useEffect)(() => {
    debouncedUpdate();
  }, [debouncedUpdate, selectedTabId]);
  (0, import_react.useEffect)(() => {
    const container = containerRef.current;
    if (!container) return;
    let resizeObserver = null;
    try {
      resizeObserver = new ResizeObserver((entries) => {
        try {
          const validEntries = entries.filter(
            (entry) => entry.target && entry.target.isConnected
          );
          if (validEntries.length > 0) {
            debouncedUpdate();
          }
        } catch (error) {
          console.warn("useSelectionIndicator: Error in ResizeObserver callback:", error);
        }
      });
      resizeObserver.observe(container);
      if (selectedTabRef == null ? void 0 : selectedTabRef.current) {
        resizeObserver.observe(selectedTabRef.current);
      }
    } catch (error) {
      console.warn("useSelectionIndicator: Failed to create ResizeObserver:", error);
    }
    return () => {
      if (resizeObserver) {
        try {
          resizeObserver.disconnect();
        } catch (error) {
          console.warn("useSelectionIndicator: Error disconnecting ResizeObserver:", error);
        }
      }
    };
  }, [containerRef, selectedTabRef, debouncedUpdate]);
  (0, import_react.useEffect)(() => {
    const container = containerRef.current;
    if (!container) return;
    const nativeFocusIn = (event) => {
      const syntheticEvent = {
        ...event,
        currentTarget: event.currentTarget,
        target: event.target
      };
      handleFocusIn(syntheticEvent);
    };
    container.addEventListener("focusin", nativeFocusIn);
    container.addEventListener("focusout", handleFocusOut);
    container.addEventListener("mousedown", handleMouseDown);
    return () => {
      container.removeEventListener("focusin", nativeFocusIn);
      container.removeEventListener("focusout", handleFocusOut);
      container.removeEventListener("mousedown", handleMouseDown);
    };
  }, [containerRef, handleFocusIn, handleFocusOut, handleMouseDown]);
  return {
    selectionIndicatorProps: {
      focusRingClasses,
      isFocusVisible,
      style: {
        ...indicatorStyle,
        transition: getTransition(transition)
      }
    },
    listContainerProps: {
      onFocus: handleFocusIn,
      onBlur: handleFocusOut,
      onMouseDown: handleMouseDown
    }
  };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useSelectionIndicator
});
