// src/components/user-action/input/InsideLabelInput.tsx
import { useId } from "react";
import { forwardRef as forwardRef2, useState as useState3 } from "react";
import clsx2 from "clsx";

// src/components/user-action/input/Input.tsx
import { forwardRef, useImperativeHandle, useRef } from "react";
import clsx from "clsx";

// src/hooks/useDelay.ts
import { useEffect, useState } from "react";
var defaultOptions = {
  delay: 3e3,
  disabled: false
};
function useDelay(options) {
  const [timer, setTimer] = useState(void 0);
  const { delay, disabled } = {
    ...defaultOptions,
    ...options
  };
  const clearTimer = () => {
    clearTimeout(timer);
    setTimer(void 0);
  };
  const restartTimer = (onDelayFinish) => {
    if (disabled) {
      return;
    }
    clearTimeout(timer);
    setTimer(setTimeout(() => {
      onDelayFinish();
      setTimer(void 0);
    }, delay));
  };
  useEffect(() => {
    return () => {
      clearTimeout(timer);
    };
  }, [timer]);
  useEffect(() => {
    if (disabled) {
      clearTimeout(timer);
      setTimer(void 0);
    }
  }, [disabled, timer]);
  return { restartTimer, clearTimer, hasActiveTimer: !!timer };
}

// src/hooks/focus/useFocusManagement.ts
import { useCallback } from "react";
function useFocusManagement() {
  const getFocusableElements = useCallback(() => {
    return Array.from(
      document.querySelectorAll(
        'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
      )
    ).filter(
      (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
    );
  }, []);
  const getNextFocusElement = useCallback(() => {
    const elements = getFocusableElements();
    if (elements.length === 0) {
      return void 0;
    }
    let nextElement = elements[0];
    if (document.activeElement instanceof HTMLElement) {
      const currentIndex = elements.indexOf(document.activeElement);
      nextElement = elements[(currentIndex + 1) % elements.length];
    }
    return nextElement;
  }, [getFocusableElements]);
  const focusNext = useCallback(() => {
    const nextElement = getNextFocusElement();
    nextElement?.focus();
  }, [getNextFocusElement]);
  const getPreviousFocusElement = useCallback(() => {
    const elements = getFocusableElements();
    if (elements.length === 0) {
      return void 0;
    }
    let previousElement = elements[0];
    if (document.activeElement instanceof HTMLElement) {
      const currentIndex = elements.indexOf(document.activeElement);
      if (currentIndex === 0) {
        previousElement = elements[elements.length - 1];
      } else {
        previousElement = elements[currentIndex - 1];
      }
    }
    return previousElement;
  }, [getFocusableElements]);
  const focusPrevious = useCallback(() => {
    const previousElement = getPreviousFocusElement();
    if (previousElement) previousElement.focus();
  }, [getPreviousFocusElement]);
  return {
    getFocusableElements,
    getNextFocusElement,
    getPreviousFocusElement,
    focusNext,
    focusPrevious
  };
}

// src/hooks/useOverwritableState.ts
import { useEffect as useEffect2, useState as useState2 } from "react";

// src/utils/resolveSetState.ts
function resolveSetState(action, prev) {
  return typeof action === "function" ? action(prev) : action;
}

// src/hooks/useOverwritableState.ts
var useOverwritableState = (initialValue, onChange) => {
  const [state, setState] = useState2(initialValue);
  useEffect2(() => {
    setState(initialValue);
  }, [initialValue]);
  const onChangeWrapper = (action) => {
    const resolved = resolveSetState(action, state);
    setState(resolved);
    onChange?.(state);
  };
  return [state, onChangeWrapper];
};

// src/components/user-action/input/Input.tsx
import { jsx } from "react/jsx-runtime";
var defaultEditCompleteOptions = {
  allowEnterComplete: false,
  onBlur: true,
  afterDelay: true,
  delay: 2500
};
var Input = forwardRef(function Input2({
  value,
  onChange,
  onChangeText,
  onEditCompleted,
  editCompleteOptions,
  disabled = false,
  invalid = false,
  defaultStyle = true,
  className,
  ...props
}, forwardedRef) {
  const {
    onBlur: allowEditCompleteOnBlur,
    afterDelay,
    delay,
    allowEnterComplete
  } = { ...defaultEditCompleteOptions, ...editCompleteOptions };
  const {
    restartTimer,
    clearTimer
  } = useDelay({ delay, disabled: !afterDelay });
  const innerRef = useRef(null);
  useImperativeHandle(forwardedRef, () => innerRef.current);
  const { focusNext } = useFocusManagement();
  return /* @__PURE__ */ jsx(
    "input",
    {
      ...props,
      ref: innerRef,
      value,
      disabled,
      className: defaultStyle ? clsx(
        "px-3 py-2 rounded-md text-sm h-10 border-2 border-transparent focus-style-none",
        {
          "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
          "bg-negative/20 text-negative hover:border-negative focus-visible:border-negative": !disabled && invalid,
          "bg-disabled-background text-disabled border-disabled-border": disabled
        },
        className
      ) : className,
      onKeyDown: (event) => {
        props.onKeyDown?.(event);
        if (!allowEnterComplete) {
          return;
        }
        if (event.key === "Enter" && !event.shiftKey) {
          event.preventDefault();
          innerRef.current?.blur();
          onEditCompleted?.(event.target.value);
          focusNext();
        }
      },
      onBlur: (event) => {
        props.onBlur?.(event);
        if (allowEditCompleteOnBlur) {
          onEditCompleted?.(event.target.value);
          clearTimer();
        }
      },
      onChange: (event) => {
        onChange?.(event);
        const value2 = event.target.value;
        restartTimer(() => {
          innerRef.current?.blur();
          onEditCompleted?.(value2);
        });
        onChangeText?.(value2);
      },
      "aria-invalid": props["aria-invalid"] ?? invalid,
      "aria-disabled": props["aria-disabled"] ?? disabled
    }
  );
});

// src/components/user-action/input/InsideLabelInput.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var InsideLabelInput = forwardRef2(function InsideLabelInput2({
  id: customId,
  label,
  ...props
}, forwardedRef) {
  const { value } = props;
  const [isFocused, setIsFocused] = useState3(false);
  const generatedId = useId();
  const id = customId ?? generatedId;
  return /* @__PURE__ */ jsxs("div", { className: clsx2("relative"), children: [
    /* @__PURE__ */ jsx2(
      Input,
      {
        ...props,
        id,
        className: clsx2("h-14 px-4 pb-2 py-6.5", props.className),
        ref: forwardedRef,
        "aria-labelledby": id + "-label",
        onFocus: (event) => {
          props.onFocus?.(event);
          setIsFocused(true);
        },
        onBlur: (event) => {
          props.onBlur?.(event);
          setIsFocused(false);
        }
      }
    ),
    /* @__PURE__ */ jsx2(
      "label",
      {
        id: id + "-label",
        "aria-hidden": true,
        "data-display": isFocused || !!value ? "small" : "full",
        className: clsx2(
          // margin left to account for the border which is ignored for absolute positions
          "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
          "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
          "data-[display=full]:top-1/2 data-[display=full]:-translate-y-1/2 data-[display=full]:typography-body-md"
        ),
        children: label
      }
    )
  ] });
});
var InsideLabelInputUncontrolled = ({
  value: initialValue,
  ...props
}) => {
  const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
  return /* @__PURE__ */ jsx2(
    InsideLabelInput,
    {
      ...props,
      value,
      onChangeText: setValue
    }
  );
};
export {
  InsideLabelInput,
  InsideLabelInputUncontrolled
};
//# sourceMappingURL=InsideLabelInput.js.map