var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/user-action/input/index.ts
var input_exports = {};
__export(input_exports, {
  Input: () => Input,
  InputUncontrolled: () => InputUncontrolled,
  InsideLabelInput: () => InsideLabelInput,
  InsideLabelInputUncontrolled: () => InsideLabelInputUncontrolled,
  ToggleableInput: () => ToggleableInput,
  ToggleableInputUncontrolled: () => ToggleableInputUncontrolled
});
module.exports = __toCommonJS(input_exports);

// src/components/user-action/input/Input.tsx
var import_react4 = require("react");
var import_clsx = __toESM(require("clsx"), 1);

// src/hooks/useDelay.ts
var import_react = require("react");
var defaultOptions = {
  delay: 3e3,
  disabled: false
};
function useDelay(options) {
  const [timer, setTimer] = (0, import_react.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));
  };
  (0, import_react.useEffect)(() => {
    return () => {
      clearTimeout(timer);
    };
  }, [timer]);
  (0, import_react.useEffect)(() => {
    if (disabled) {
      clearTimeout(timer);
      setTimer(void 0);
    }
  }, [disabled, timer]);
  return { restartTimer, clearTimer, hasActiveTimer: !!timer };
}

// src/hooks/focus/useFocusManagement.ts
var import_react2 = require("react");
function useFocusManagement() {
  const getFocusableElements = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.useCallback)(() => {
    const nextElement = getNextFocusElement();
    nextElement?.focus();
  }, [getNextFocusElement]);
  const getPreviousFocusElement = (0, import_react2.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 = (0, import_react2.useCallback)(() => {
    const previousElement = getPreviousFocusElement();
    if (previousElement) previousElement.focus();
  }, [getPreviousFocusElement]);
  return {
    getFocusableElements,
    getNextFocusElement,
    getPreviousFocusElement,
    focusNext,
    focusPrevious
  };
}

// src/hooks/useOverwritableState.ts
var import_react3 = require("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] = (0, import_react3.useState)(initialValue);
  (0, import_react3.useEffect)(() => {
    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
var import_jsx_runtime = require("react/jsx-runtime");
var defaultEditCompleteOptions = {
  allowEnterComplete: false,
  onBlur: true,
  afterDelay: true,
  delay: 2500
};
var Input = (0, import_react4.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 = (0, import_react4.useRef)(null);
  (0, import_react4.useImperativeHandle)(forwardedRef, () => innerRef.current);
  const { focusNext } = useFocusManagement();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "input",
    {
      ...props,
      ref: innerRef,
      value,
      disabled,
      className: defaultStyle ? (0, import_clsx.default)(
        "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
    }
  );
});
var InputUncontrolled = ({
  value = "",
  onChangeText,
  ...props
}) => {
  const [usedValue, setUsedValue] = useOverwritableState(value, onChangeText);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    Input,
    {
      ...props,
      value: usedValue,
      onChangeText: setUsedValue
    }
  );
};

// src/components/user-action/input/InsideLabelInput.tsx
var import_react5 = require("react");
var import_react6 = require("react");
var import_clsx2 = __toESM(require("clsx"), 1);
var import_jsx_runtime2 = require("react/jsx-runtime");
var InsideLabelInput = (0, import_react6.forwardRef)(function InsideLabelInput2({
  id: customId,
  label,
  ...props
}, forwardedRef) {
  const { value } = props;
  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
  const generatedId = (0, import_react5.useId)();
  const id = customId ?? generatedId;
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx2.default)("relative"), children: [
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      Input,
      {
        ...props,
        id,
        className: (0, import_clsx2.default)("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__ */ (0, import_jsx_runtime2.jsx)(
      "label",
      {
        id: id + "-label",
        "aria-hidden": true,
        "data-display": isFocused || !!value ? "small" : "full",
        className: (0, import_clsx2.default)(
          // 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__ */ (0, import_jsx_runtime2.jsx)(
    InsideLabelInput,
    {
      ...props,
      value,
      onChangeText: setValue
    }
  );
};

// src/components/user-action/input/ToggleableInput.tsx
var import_react7 = require("react");
var import_lucide_react = require("lucide-react");
var import_clsx3 = __toESM(require("clsx"), 1);
var import_jsx_runtime3 = require("react/jsx-runtime");
var ToggleableInput = (0, import_react7.forwardRef)(function ToggleableInput2({
  value,
  initialState = "display",
  editCompleteOptions,
  ...props
}, forwardedRef) {
  const [isEditing, setIsEditing] = (0, import_react7.useState)(initialState !== "display");
  const innerRef = (0, import_react7.useRef)(null);
  (0, import_react7.useImperativeHandle)(forwardedRef, () => innerRef.current);
  (0, import_react7.useEffect)(() => {
    if (isEditing) {
      innerRef.current?.focus();
    }
  }, [isEditing]);
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx3.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      Input,
      {
        ...props,
        ref: innerRef,
        value,
        onEditCompleted: (text) => {
          props.onEditCompleted?.(text);
          setIsEditing(false);
        },
        onFocus: (event) => {
          props.onFocus?.(event);
          setIsEditing(true);
          event.target.select();
        },
        editCompleteOptions: {
          ...editCompleteOptions,
          allowEnterComplete: true
        },
        className: (0, import_clsx3.default)(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
          "underline": isEditing,
          "text-transparent": !isEditing
        }),
        defaultStyle: false
      }
    ),
    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx3.default)(" truncate"), children: value }),
      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Pencil, { className: (0, import_clsx3.default)(`size-force-4`, { "text-transparent": isEditing }) })
    ] })
  ] });
});
var ToggleableInputUncontrolled = ({
  value: initialValue,
  onChangeText,
  ...restProps
}) => {
  const [value, setValue] = useOverwritableState(initialValue, onChangeText);
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    ToggleableInput,
    {
      value,
      onChangeText: setValue,
      ...restProps
    }
  );
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Input,
  InputUncontrolled,
  InsideLabelInput,
  InsideLabelInputUncontrolled,
  ToggleableInput,
  ToggleableInputUncontrolled
});
//# sourceMappingURL=index.cjs.map